Привет всем! У меня есть простая форма с текстовым полем, но мне нужно, чтобы оно работало как поле для ввода пароля. То есть, когда пользователь вводит символы, они должны отображаться звездочками. При этом реальный текст должен сохраняться в скрытом поле. Вот мой HTML-код:
Пароль: <input type="text" id="writer" value=""/>
<input type="hidden" id="holder" value=""/>
Кто-нибудь может подсказать, как это реализовать на чистом JavaScript? Желательно простое решение, без использования сложных библиотек. Заранее спасибо за помощь!
да, это можно сделать! вот простой способ: добавь обработчик события ‘input’ для поля ввода. в нем замени каждый символ на звездочку и сохраняй реальный текст в скрытом поле. примерно так:
var writer = document.getElementById('writer');
var holder = document.getElementById('holder');
writer.addEventListener('input', function() {
holder.value = this.value;
this.value = '*'.repeat(this.value.length);
});
этот код будет работать для большинства случаев. но учти, что опытный пользователь все равно сможет увидеть реальный текст, если захочет. для полной безопасности лучше использовать стандартное поле типа ‘password’.
Можно попробовать вот такой вариант - использовать data-атрибут для хранения реального текста:
document.getElementById(‘writer’).oninput = function() {
this.dataset.value = this.value;
this.value = ‘•’.repeat(this.value.length);
}
Так текст будет храниться в data-value, а показываться точки. Просто и работает. Только учти, что это не совсем безопасно - продвинутый юзер все равно сможет увидеть пароль.
Можно сделать еще проще без скрытого поля. Используй тип ‘password’ для инпута, но при фокусе меняй на ‘text’. Так юзер будет видеть что вводит, а при потере фокуса - звездочки. Примерно так:
writer.onfocus = () => writer.type = ‘text’;
writer.onblur = () => writer.type = ‘password’;
Так даже безопаснее, чем хранить пароль в скрытом поле. И UX лучше - юзер видит что вводит, но потом все скрыто.