Только для чтения <input> предотвращает добавление значения к другому элементу

Question

У меня есть серия <input> элементов и соответствующий скрипт, который автоматически фокусирует следующее поле после ввода. Кроме того, имеется элемент readonly, который обеспечивает чисто контекст для пользователя.

Элемент readonly предотвращает ввод значения в #DialFifth. Я попытался использовать селектора атрибутов, чтобы предотвратить сбор элементов с помощью readonly, но это, похоже, не работает.

См. Фрагмент - любые идеи?

$(':input').keypress(function() { 
 
    $(this).next(':input').focus(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="DialFirst" name="DialFirst" type="text" value="" /> 
 
<input id="DialSecond" name="DialSecond" type="text" value="" /> 
 
<input id="DialThird" name="DialThird" type="text" value="" /> 
 
<input id="DialFourth" name="DialFourth" type="text" value="" /> 
 
<input id="DialFifth" name="DialFifth" type="text" value="" /> <!--Unable to type into this box--> 
 
<input id="DialFinal" name="DialFinal" type="text" readonly="readonly" value="0" />

Answer 1

Этот вопрос связан с порядком, в котором значение изменяется, и событие. Для того, чтобы делать то, что вам требуется, используйте keyup вместо:

$(':input').keyup(function() { 
 
    $(this).next(':input').focus(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="DialFirst" name="DialFirst" type="text" value="" /> 
 
<input id="DialSecond" name="DialSecond" type="text" value="" /> 
 
<input id="DialThird" name="DialThird" type="text" value="" /> 
 
<input id="DialFourth" name="DialFourth" type="text" value="" /> 
 
<input id="DialFifth" name="DialFifth" type="text" value="" /> 
 
<input id="DialFinal" name="DialFinal" type="text" readonly="readonly" value="0" />