Ввод текста маски

Эй, я пытаюсь сделать простой ввод текста примерно таким.

<input type="text" id="pin" name="pin" maxlength="4" size="4" placeholder="____">

Теперь во внешнем интерфейсе я хочу, чтобы этот заполнитель оставался до тех пор, пока пользователь не введет все символы.

Например:

1___
12__
123_
1234

Это понятно? спасибо за помощь

РЕДАКТИРОВАТЬ: Позвольте мне сделать это более ясным. Я хочу, чтобы заполнитель или что-то, имитирующее заполнитель, оставался видимым до тех пор, пока не будут введены все символы! Это означает, что когда я набираю символ, он просто не исчезает. Он вставляет подчеркивание в символы, которые еще не были введены.


javascript html placeholder
person user2123665    schedule 15.03.2013    source источник
comment
То, что вы ищете, это функция маскировки. Существует множество вариантов, если вы используете маску ввода javascript в Google (справедливое предупреждение, большинство из них будут включать jQuery или какую-либо другую зависимость)   -  person BLSully    schedule 15.03.2013
comment
Спасибо, BLSully, я посмотрю на это. РЕДАКТИРОВАТЬ: Да, я думаю, что это оно, так как мой английский был не так хорош, я не знал правильного имени.   -  person user2123665    schedule 15.03.2013
comment
Как также предложил @BLSully, вот плагин маскировки jQuery, который я использовал в прошлом: http://digitalbush.com/projects/masked-input-plugin/   -  person gmartellino    schedule 15.03.2013
comment
Возможно, вы захотите отредактировать свой вопрос, чтобы отразить, что вы ищете решение для маскировки... то, что вы пытаетесь сделать с помощью атрибута placeholder, просто неправильно.   -  person BLSully    schedule 15.03.2013
comment
Спасибо, что прояснили это. Мой английский не очень хорош, и я не знал правильного имени. Спасибо, и я думаю, что я могу сделать это сейчас.   -  person user2123665    schedule 15.03.2013
comment
Это кажется очень необычным элементом UX. Предполагая, что цель состоит в том, чтобы убедить пользователя, что требуются 4 символа, как насчет использования четырех отдельных текстовых полей для ввода и использования JavaScript для перемещения фокуса между ними по мере ввода пользователем?   -  person Richard Ev    schedule 15.03.2013
comment
@RichardEv: вы предлагаете, чтобы, если мне нужно создать ввод для номера социального страхования США, должно быть 9 отдельных вводов? =0\   -  person BLSully    schedule 15.03.2013
comment
@BLSully - я рассматривал только сценарий вопроса; 4 персонажа.   -  person Richard Ev    schedule 15.03.2013
comment
@RichardEv: извините, плохой выбор слов с моей стороны. Не мой вопрос, просто мое наблюдение. Я считаю, что в целом указывать несколько входных данных для атомарного фрагмента данных — плохой выбор. Если OP необходимо ввести 4-значный номер заказа на покупку, опять же, 4 отдельных ввода кажутся очень неудобным дизайном UX.   -  person BLSully    schedule 15.03.2013

Ответы (1)


arrow_upward
1
arrow_downward

По умолчанию заполнители не работают так, потому что это плохая идея. Возьмем, к примеру, такую ​​ситуацию:

<input type="text" placeholder="Type something here!"/>

Если пользователь начнет вводить «Hello, world!», процесс будет таким:

"Hype something here!"
"Hepe something here!" ...
"Hellosomething here!" ...
"Hello world!ng here!"

Это было бы нормально, если бы ваш заполнитель был едва виден, но по большей части это было бы просто уродливо и, возможно, также сбивало бы с толку - пользователь может поверить, что он должен ввести именно то, что указано в качестве заполнителя, или он может попытаться очистить поле. ввод полностью безуспешно.

Заполнители просто дают текстовым элементам ввода фиктивное содержимое до тех пор, пока не будет добавлено реальное содержимое.

person James Donnelly    schedule 15.03.2013
comment
Спасибо, я хотел бы добавить, что правильно назвать то, что я пытался сделать, это замаскировать ввод, и когда я погуглил, он дал мне ответ. Спасибо за помощь. - person user2123665; 15.03.2013