Как разбить поле ввода на отдельные поля ввода на экране?

Посмотрите на изображение:

Я хочу создать что-то вроде изображения, где пользовательский пароль вводит 4-значный одноразовый пароль (OTP). Прямо сейчас я достиг этого четырьмя отдельными входами, а затем объединяя значения в javascript:

<input type="text" class="form-control" placeholder="0" maxlength="1"  />
<input type="text" class="form-control" placeholder="0" maxlength="1" />
<input type="text" class="form-control" placeholder="0" maxlength="1" />
<input type="text" class="form-control" placeholder="0" maxlength="1" />

Я не уверен, что это правильный подход. Я думаю, что должны быть некоторые параметры стиля, по которым одно текстовое поле ввода будет отображаться как разделенное на изображение. Возможно ли использование бутстрапа? Как создать один элемент управления ввода, который будет отображаться как разделенное поле входов?

Ответ 1

Вам не нужно хранить 4 отдельных поля;

Сначала вы должны настроить интервал между символами, а затем настроить стиль границы снизу...

#partitioned {
  padding-left: 15px;
  letter-spacing: 42px;
  border: 0;
  background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 50px 1px;
  background-repeat: repeat-x;
  background-position-x: 35px;
  width: 220px;
}

<input id="partitioned" type="text" maxlength="4" />

Ответ 2

Я бы просто использовал этот 4 отдельных поля и добавил один и тот же обработчик событий для всех из них:

Проверьте, является ли вход действительным (в классе символов, который вы готовы принять)
Проверьте, в каком поле вы находитесь, а затем переместите фокус в следующее поле или кнопку ok.

Вы можете даже написать немного отдельного JS для этого и повторно использовать его.

Ответ 3

Надеюсь, это решение поможет вам. Вы можете удалить событие onfocus из входных элементов, если хотите.

<body>
  <head>
    <style>
      input[type=number] {
          height: 45px;
          width: 45px;
          font-size: 25px;
          text-align: center;
          border: 1px solid #000000;
      }
      input[type=number]::-webkit-inner-spin-button,
      input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
    </style>
    <script>
      function getCodeBoxElement(index) {
        return document.getElementById('codeBox' + index);
      }
      function onKeyUpEvent(index, event) {
        const eventCode = event.which || event.keyCode;
        if (getCodeBoxElement(index).value.length === 1) {
          if (index !== 4) {
            getCodeBoxElement(index+ 1).focus();
          } else {
            getCodeBoxElement(index).blur();
            // Submit code
            console.log('submit code ');
          }
        }
        if (eventCode === 8 && index !== 1) {
          getCodeBoxElement(index - 1).focus();
        }
      }
      function onFocusEvent(index) {
        for (item = 1; item < index; item++) {
          const currentElement = getCodeBoxElement(item);
          if (!currentElement.value) {
              currentElement.focus();
              break;
          }
        }
      }
    </script>
  </head>
  <body>
    <form>
        <input id="codeBox1" type="number" maxlength="1" onkeyup="onKeyUpEvent(1, event)" onfocus="onFocusEvent(1)"/>
        <input id="codeBox2" type="number" maxlength="1" onkeyup="onKeyUpEvent(2, event)" onfocus="onFocusEvent(2)"/>
        <input id="codeBox3" type="number" maxlength="1" onkeyup="onKeyUpEvent(3, event)" onfocus="onFocusEvent(3)"/>
        <input id="codeBox4" type="number" maxlength="1" onkeyup="onKeyUpEvent(4, event)" onfocus="onFocusEvent(4)"/>
    </form>
  </body>
</body>

Ответ 4

Я не знаю, как разделить вход в html5, возможно, в css вы можете использовать один и тот же класс для управления своим вводом, и вы можете вводить стиль, например:

div{
   text-align:center;
   background:#eee;
}
input{
    border: 0;
    outline: 0;
    background: transparent;
    border-bottom: 2px solid black;
    width: 100px;
    text-align:center;
    padding : 5px;
    margin-left:10px;
}
button{
  margin-top:20px !important;
  margin: 0 auto;
  color: white;
  border-radius: 4px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

<div>
    <input class="form-control" placeholder="0" maxlength="1"  />
    <input class="form-control" placeholder="0" maxlength="1"  />
    <input class="form-control" placeholder="0" maxlength="1"  />
    <input class="form-control" placeholder="0" maxlength="1"  />
    <br><button type="button" onclick="myFunction()">Submit</button>
    <p id="optRes"></p>
</div>

Ответ 5

Вы можете использовать приведенную ниже директиву, если используете AngularJS

В вашем HTML добавить

<div otp-input-directive options="otpInput"></div>

В контроллере добавьте

$scope.otpInput={
        size:6,
        type:"text",
        onDone: function(value){
            console.log(value);
        },
        onChange: function(value){
            console.log(value);
        }
    };

Ссылка на плунжер

Внешний вид пользовательского интерфейса

https://github.com/amstel91/otp-input-directive

Ответ 6

это решение со мной, я использую шаблон brezze,