More than 3 years have passed since last update.

iOS safariのinputイベント+focus()の謎挙動について

Posted at 2020-10-12

下のような文字を一文字を打つと自動で次の入力値に行くようなjqueryをかきました
※実際のものより色々省いたので下記で動くかは未確認

<html>
<input id="number1" type="number" name="number1" value="" >
<input id="number2" type="number" name="number2" value="" >
<input id="number3" type="number" name="number3" value="" >
<input id="number4" type="number" name="number4" value="">
</html> 

<script type="text/javascript">
            $(function(){
              $('input[type=number]').on('input', function(ev){

                var $me = $(this);
                var $list = $('input[type=number]');

                  $list.each(function(index){
                   
                    if ($(this).is($me)) {

                      $list.eq(index+1).focus();
  
                      ev.preventDefault();

                    }
                  });
                
                });
           });

</script>

PC系ブラウザでは問題なかったですがiPhoneのsafariでは下記のようなよくわからない現象がおきました

number1に1と入力
↓
何故かnumber1とnumber2に1と入力されnumber3にフォーカスが移動

あれこれ調べてみたものの解決策らしきものは見当たらず
safariではinputイベントの発火のタイミングが早すぎて(遅すぎて?)focusの直後にも発火しているのでは?
と思い下記のようにすることで一応想定した動きを得ることはできました

setTimeout( function(){
  $list.eq(index+1).focus();
} ,100)

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up