Сделать маску ввода поля с точками

У меня есть поле ввода, как это:Сделать маску ввода поля с точками

<input type="text" placeholder=".........">

Когда пользователь вводит в поле с текстом я хотел бы многоточие заменить буквы. Поэтому, если я войду в «Ха». Пользователь видит это:

<input type="text" placeholder="Ha.......">

И так далее для остальных букв

Я видел много примеров с датами, номерами и IP-адресов, но я до сих пор совершенно не уверены в том, как воспроизвести это мой проблема.

источник

2016-01-14 user3398922

ожидаемая длина входа Соответствует ли количество точек? – Halcyon

Какой JavaScript вы пытались? – j08691

У меня есть объявление, чтобы сделать это для проектов и помнить, что это очень больно. (Особенно, когда вы начинаете учет мобильных устройств) – dovidweisz

Решение этого вопроса будет несколько сложным.

Сначала создайте новый дублированный вход, который будет действовать как «заполнитель», поскольку он будет плавать за реальным полем ввода. Затем присоедините прослушиватель событий к реальному вводу и заполните значение в «placeholder».

<html> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <div style="position: relative; width: 400px; height: 24px;"> 
 
     <input type="text" style="width: 100%; height: 100%; position: absolute; z-index: 1; color: #ccc" id="placeholder"> 
 
     <input type="text" style="width: 100%; height: 100%; position: absolute; z-index: 2; background-color: transparent; color: #000" id="realInput"> 
 
    </div> 
 
    <script> 
 
     function fillPlaceholder(){ 
 
     //suppose you want 9 characters for the placeholder 
 
     var limit = 9; 
 
     var text = $("#realInput").val(); 
 
     while (text.length < limit) { 
 
      text += "."; 
 
     } 
 
     $("#placeholder").val(text); 
 
     } 
 
     $("#realInput").on("input", fillPlaceholder); 
 
     fillPlaceholder(); 
 
    </script> 
 
    </body> 
 
</html>

источник

2016-01-14 16:02:44 mylee

Очень благодарен за такой короткий и простой ответ. Никогда не думал об этом таким образом. – user3398922

Сделать маску ввода поля с точками

ответ

Смежные вопросы