【jquery】iOSのsafariだけラジオボタンへのfocusが効かない

Question

###やりたいこと
jqueryでラジオボタンにfocus()をさせたい。

###やってみたコード

<form>
<div>
    <input type="radio" name="radio_group" value="1" required="required">
    <input type="radio" name="radio_group" value="2" required="required">
    <input type="radio" name="radio_group" value="3" required="required">
    <input type="radio" name="radio_group" value="4" required="required">
</div>

<button id="submit" type="submit">送信する</button>
</form>

<script>
$(function(){
    $('#submit').click(function(e) {
        $('input').each(function(i, element){
            if ($(element).attr('type') === 'radio' &&
                $(element).parents('div').find('.ok').length === 0) {
                $(element).focus();
                e.preventDefault();
                if(!$(element).parent('div').hasClass('error')) {
                    $(element).parent('div').append('<p class="errorText">※選択してください</p>');
                }
                $(element).parent('div').addClass('error');
            } else {
                $(element).parent('div').removeClass('error');
                $(element).parent('div').find('.errorText').remove();
            }
        });
    });
});
</script>

問題点

iOSのsafariのみfocusが当たらない。

iOSのsafariでもfocusされるようにするにはどのようにしたら良いのでしょうか。

Comments

[int32_t]

質問文内に focus() するコードはないようです。
↑質問文が更新されました。

Answer 1

からのラジオボタンにフォーカスするUIがフレンドリーだとは思えませんが

$(function(){
  $('#submit').on('click',function(e) {
    $('.errorText').remove();
    if($(':radio:checked').length==0){
      $(':radio').closest('div').append('<p class="errorText">※選択してください</p>');
      $(':radio:first').trigger('focus');
    }
  });
});

Comments

[singlestroke]

ありがとうございます。しかしiPhoneではフォーカスが当たりませんでした。

[yambejp]

フォーカスがあたっていないとなぜいいきれるのでしょうか？

[singlestroke]

フォーカスは当たっているようでした。大変失礼いたしました。
下記で再現してみました。
https://okmokmokm.web.fc2.com/radio.html
iPhoneにて、テキスト入力欄を空白でsubmitすると、テキスト入力欄にフォーカスが当たり、テキスト入力欄がブラウザ画面中央付近に表示されます。しかしテキスト入力欄に何か入力し、ラジオを何も選択せずにsubmitすると（フォーカスは当たっているようですが）ラジオ入力が画面中央に表示されるまでスクロールしません。この場合に入力欄が空白の場合と同様に、ラジオが選択が画面中央に表示されるようにしたいのです。