Перехват нажатий кнопок в javascript без взаимодействия с сервером
У меня есть форма регистрации, в которой пользователь должен ввести свой адрес электронной почты и пароль, оба находятся в двух отдельных текстовых полях. Я хочу предоставить кнопку, которую пользователь может щелкнуть, чтобы пароль (который замаскирован) появлялся во всплывающем окне, когда пользователь нажимает кнопку.
В настоящее время мой код JavaScript для этого выглядит следующим образом:
function toggleShowPassword() {
var button = $get('PASSWORD_TEXTBOX_ID');
var password;
if (button)
{
password = button.value;
alert(password);
button.value = password;
}
}
Проблема в том, что каждый раз, когда пользователь нажимает кнопку, пароль очищается как в Firefox, так и в IE. Я хочу, чтобы они могли видеть свой пароль открытым текстом для проверки без повторного ввода пароля.
Мои вопросы:
Почему поле пароля сбрасывается при каждом нажатии кнопки?
Как я могу сделать так, чтобы поле пароля НЕ очищалось после того, как пользователь увидел свой пароль в открытом виде?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 8
Я предполагаю, что у браузера есть проблема с скриптом, пытающимся установить значение поля пароля:
button.value = password;
Эта строка кода не имеет реальной цели. password.value не затрагивается в предыдущих строках, где вы читаете значение и используете его в alert().
Это должна быть более простая версия вашего кода:
function toggleShowPassword() {
var button = $get('PASSWORD_TEXTBOX_ID');
if (button)
{
alert(button.value);
}
}
edit: на самом деле я только что провел быстрый тест, и у Firefox нет проблем с установкой значения поля пароля с помощью кода, такого как button.value = "blah". Так что не похоже, что это так ... Я бы проверил, вызывает ли ваш код ASP.NET обратную передачу, как предлагали другие.
Вам не нужно делать button.value = password;, поскольку чтение значения не меняет его. Я не уверен, почему он очищается, возможно, JavaScript не позволяет изменять значения полей пароля.
Похоже, что вы делаете запрос к серверу при каждом щелчке мышью, а пароль, сбрасываемый при каждой загрузке страницы, является типичным поведением браузеров.
Вы не сказали, что используете ASP.NET, но ...
По замыслу ASP.NET очищает во время обратной передачи значение элементов управления TextBox, для которых Mode задан пароль. Я работаю над этим в подклассе со следующим кодом:
// If the TextMode is "password", the Text property won't work
if ( TextMode == System.Web.UI.WebControls.TextBoxMode.Password )
Attributes[ "value" ] = stringValue;
Если вы не хотите, чтобы кнопка отправляла форму, убедитесь, что она имеет тип «кнопка», а не «отправить». Например, вы можете сделать что-то вроде этого:
<input type = "button" value = "Show My Password" onclick = "toggleShowPassword()"/>
В вашем HTML:
<input type = "button" onclick = "toggleShowPassword();">
Вам нужно использовать «кнопку», а не «отправить», чтобы предотвратить публикацию вашей формы.
Я сделал быстрый пример рабочей версии:
<html>
<head>
<script type = "text/javascript" src = "prototype.js"></script>
<script type = "text/javascript">
function toggleShowPassword() {
var textBox = $('PasswordText');
if (textBox)
{
alert(textBox.value);
}
}
</script>
</head>
<body>
<input type = "password" id = "PasswordText" /><input type = "button" onclick = "toggleShowPassword();" value = "Show Password" />
</body>
</html>
Ключ в том, что ввод имеет тип кнопки, а не отправку. Я использовал библиотеку прототип для получения элемента по идентификатору.
ха!
ответ, если здесь: http://forums.asp.net/p/1067527/1548528.aspx
Я нашел решение ... исправление было простым изменением
OnClientClick = "myOnClick()"
к
OnClientClick = "return myOnClick()"
Вот полностью исправленный код ...
function myOnClick () { // выполняем какие-то другие действия ... вернуть ложь; } Без названия