Вопросы Теги

Как разделить поле ввода для otp в angular4 и html? [Дубликат]

Вы также можете использовать это: https://github.com/pankleks/TypeScriptBuilder

Эта небольшая библиотека генерирует определение типа TypeScript на основе типов C #. Используйте его непосредственно в своем проекте C # для создания кода для вашего проекта TypeScript с интерфейсом. Вы также можете использовать небольшое консольное приложение для генерации кода с помощью инструментов предварительной сборки.

Работает на Full & amp; NET Core Framework!

Установить по nuget: Install-Package TypeScriptBuilder

Поддерживаемые функции

  • Разрешение зависимости типа
  • Generic
  • Тип наследования
  • Пространства имен (модули)
  • Перечисления
  • Нюкальные типы
  • Перевод словаря (в
  • Набор атрибутов управления генерации кода
  • any для типов, которые не могут быть преобразованы

Подробное описание : https://github.com/pankleks/TypeScriptBuilder/blob/master/README.md

6
задан Karan Desai 17 January 2017 в 14:24
поделиться

4 ответа

Вам не нужно хранить 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" />

- ИЗМЕНИТЬ, чтобы исправить 5 подчеркиваний для 4-символьного уродства - 

var obj = document.getElementById('partitioned');
obj.addEventListener("keydown", stopCarret); 
obj.addEventListener("keyup", stopCarret); 

function stopCarret() {
	if (obj.value.length > 3){
		setCaretPosition(obj, 3);
	}
}

function setCaretPosition(elem, caretPos) {
    if(elem != null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            }
            else
                elem.focus();
        }
    }
}
#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;
  min-width:220px;
}

#divInner{
  left: 0;
  position: sticky;
}

#divOuter{
  width:190px; 
  overflow:hidden
}
<div id="divOuter">
	<div id="divInner">
		<input id="partitioned" type="text" maxlength="4" />
	</div>
<div>

Я думаю, что это может быть отправной точкой ... надеюсь, что это поможет ...

12
ответ дан Ufuk Onder 19 August 2018 в 07:20
поделиться
  • 1
    я столкнулся с проблемой с выравниванием символа, если мы не даем максимальную длину 4 после ввода нескольких цифр номер идет вправо, он не выравнивает центр тире поля ввода – Mohan Gopi 22 January 2018 в 08:41
  • 2
    да, вы правы, и, похоже, это ограничение :( и в качестве побочной заметки на самом деле существует 5 строк раздела. Для этого это уродство, вы можете поместить поле ввода в div, а это div внутри другого ... внутренний div должен быть липким, а внешний div должен скрывать переполнения ... – Ufuk Onder 23 January 2018 в 17:33

Вы можете использовать приведенную ниже директиву, если используете 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

0
ответ дан Amstel D'Almeida 19 August 2018 в 07:20
поделиться

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

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

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

3
ответ дан Dan 19 August 2018 в 07:20
поделиться

Я не знаю, как разбить вход в 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>

Определить myFunction () и вы можете получить свой массив по вашему классу: form-control, конвертировать в строку, затем в int, если вам нужно его проверить. Помогает?

0
ответ дан Teshtek 19 August 2018 в 07:20
поделиться