Как сделать так, чтобы поле из 4-значного кода было таким?

avatar
Sinan Irmak
8 августа 2021 в 19:36
62
1
-1

Вот что я сделал:

<table>
  <tr>
    <td><input class="clock" type="text" maxlength="1" size="1" onkeyup="next(2)"></td>
    <td><input id="2" class="clock" type="text" maxlength="1" size="1" onkeyup="next(3)"></td>
    <td><input id="3" class="clock" type="text" maxlength="1" size="1" onkeyup="next(4)"></td>
    <td><input id="4" class="clock" type="text" maxlength="1" size="1"></td>
  </tr>
</table>

<script>
  function next(next) {
    document.getElementById(next).focus();
  }
</script>

Но он пропускает цифры. (вот демо: https://codepen.io/snnirmk/pen/LYyXrMj и https://codepen.io/snnirmk/pen/po38809<74> )

Как я могу сделать это, не пропуская цифры?

обновление: первая демонстрация у меня не сработала, но я обнаружил новое событие "oninput", которое не вызывает никаких проблем, в любом случае спасибо.

Источник
Evert
8 августа 2021 в 19:39
5

Первая демо работает для меня

Mak
8 августа 2021 в 19:44
0

Первая демонстрация работает и для меня ... но если вы удалите число, скажем, из третьего ввода, нажав клавишу Backspace, оно все равно перейдет к следующему вводу. Может быть, вы можете добавить проверку того, какая кнопка нажата, и пропустить переход для определенных кнопок, таких как backspace и delete.

Ry-
8 августа 2021 в 20:44
0

Как правило, такое причудливое переопределение поведения по умолчанию не является хорошей идеей. Я рекомендую один ввод, чтобы не нарушать функции, на которые полагаются люди (вы думали о вставке? речь в текст?). Если вам действительно нужен особый вид, возможно, вы можете использовать моноширинный шрифт и стилизовать его с помощью letter-spacing, а затем применить визуальную маску (все еще сомнительно) или некоторые подчеркивания-заполнители.

Ответы (1)

avatar
Rafal Roszak
8 августа 2021 в 20:09
0

Цифры будут пропущены, если вы нажмете клавишу, а затем нажмете другую клавишу, прежде чем отпустить предыдущую клавишу (что происходит, если вы печатаете быстро).

Быстрое решение — сделать что-то вроде этого:

<table> 
    <tr> 
        <td><input class="clock" type="text" maxlength="1" size="1" onkeydown="next(2)"></td> 
        <td><input id="2" class="clock" type="text" maxlength="1" size="1" onkeydown="next(3)"></td> 
        <td><input id="3" class="clock" type="text" maxlength="1" size="1" onkeydown="next(4)"></td> 
        <td><input id="4" class="clock" type="text" maxlength="1" size="1"></td> 
    </tr>
</table>

<script>function next(next) {
    setTimeout(function() {
        document.getElementById(next).focus(); 
    }, 1);
}</script>

Это решение немного хакерское, потому что оно использует функцию setTimeout. В идеале не следует использовать функцию setTimeout, но тогда решение будет более сложным.