Обработка нажатий кнопки в JavaScript без взаимодействия с сервером

Оффтоп javascript
1

Проблема с очисткой поля пароля при нажатии кнопки

У меня есть форма регистрации с двумя текстовыми полями - для email и пароля. Хочу добавить кнопку, при нажатии на которую пользователь сможет увидеть введенный пароль (который обычно скрыт звездочками) во всплывающем окне.

Вот мой текущий JavaScript код:

function displayUserPassword() {
    var inputField = document.getElementById('USER_PASSWORD_FIELD');
    var userPassword;
    if (inputField) {
        userPassword = inputField.value;
        alert(userPassword);
        inputField.value = userPassword;
    }
}

Проблема в том, что при каждом клике на кнопку поле пароля полностью очищается в Firefox и Internet Explorer. Пользователи должны иметь возможность просмотреть свой пароль для проверки, не вводя его заново.

Мои вопросы:

  1. Почему поле пароля сбрасывается при каждом нажатии кнопки?

  2. Как сделать так, чтобы поле пароля НЕ очищалось после того, как пользователь посмотрел свой пароль?

Это действительно раздражает пользователей, потому что им приходится вводить длинные пароли повторно.

2

у меня была похожая проблема раньше! скорее всего дело в том что кнопка находится внутри формы и имеет тип submit по умолчанию. когда ты кликаешь на неё, форма отправляется и страница перезагружается или обновляется частично. попробуй добавить type="button" к своей кнопке или в функции добавь event.preventDefault() если передаешь event как параметр. еще один момент - некоторые браузеры автоматически очищают поля паролей из соображений безопасности при определенных действиях. лучше всего сделать кнопку с типом button и тогда все будет работать как надо.

3

проблема может быть в том что alert в некоторых браузерах триггерит события которые очищают password поля. я бы посоветовал убрать строчку inputField.value = userPassword; из кода - она вообще лишняя там. значение и так уже в поле находится, зачем его перезаписывать? плюс попробуй заменить alert на что-то другое, например на временное изменение атрибута type с “password” на “text” на пару секунд. так пользователь увидит пароль прямо в поле и никаких глюков не будет.

4

возможно проблема в том что браузер воспринимает твое действие как попытку автозаполнения и сбрасывает поле. попробуй вместо alert использовать console.log или создать отдельный div для показа пароля. еще вариант - временно менять тип поля с password на text и обратно. какой именно тип у твоей кнопки сейчас?