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

StackOverflow https://stackoverflow.com/questions/44401

  •  09-06-2019
  •  | 
  •  

Вопрос

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

В настоящее время мой JavaScript-код для этого выглядит следующим образом:

    function toggleShowPassword() {       
        var button = $get('PASSWORD_TEXTBOX_ID');
        var password;
        if (button)
        {
            password = button.value;
            alert(password);
            button.value = password;  
        } 
   }

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

Мои вопросы таковы:

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

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

Это было полезно?

Решение

Я быстро привел пример рабочей версии:

<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>

Ключ в том, что ввод осуществляется типа button, а не submit.Я использовал прототип библиотека для извлечения элемента по идентификатору.

Другие советы

Похоже, что вы выполняете запрос к серверу при каждом нажатии, а поле пароля, сбрасываемое при каждой загрузке страницы, является типичным поведением браузеров.

Вы не сказали, что используете ASP.NET, но...

По замыслу, ASP.NET очищает во время обратной передачи значение элементов управления TextBox, режимом которых является пароль.Я работаю над этим в подклассе со следующим кодом:

// If the TextMode is "password", the Text property won't work
if ( TextMode == System.Web.UI.WebControls.TextBoxMode.Password )
    Attributes[ "value" ] = stringValue;

Если вы не хотите, чтобы кнопка отправляла форму, то убедитесь, что она имеет тип "button", а не "submit".Например, вы могли бы сделать что-то вроде этого:

<input type="button" value="Show My Password" onclick="toggleShowPassword()"/>

В вашем HTML:

<input type="button" onclick="toggleShowPassword();">

Вам нужно использовать "кнопку", а не "отправить", чтобы предотвратить публикацию вашей формы.

Я бы предположил, что у браузера возникла какая-то проблема со скриптом, пытающимся установить значение поля пароля:

button.value = password;

Эта строка кода не имеет никакой реальной цели. password.value не затрагивается в предыдущих строках, где вы считываете значение и используете его в alert().

Это должна быть более простая версия вашего кода:

function toggleShowPassword() {       
    var button = $get('PASSWORD_TEXTBOX_ID');
    if (button)
    {
        alert(button.value);
    }

}

Редактировать:на самом деле я только что провел быстрый тест, и у Firefox нет проблем с установкой значения поля пароля с помощью такого кода, как button.value = "blah".Так что не похоже, что это было бы так ...Я бы проверил, вызывает ли ваш ASP.NET код обратную отправку, как предлагали другие.

Вам не нужно этого делать button.value = password; поскольку чтение значения не изменяет его.Я не уверен, почему он очищается, возможно, JavaScript не позволяет изменять значения полей пароля.

хах!

ответ, если здесь:http://forums.asp.net/p/1067527/1548528.aspx

Я нашел решение...исправление было простым изменением

  OnClientClick="myOnClick()"

Для

  OnClientClick="return myOnClick()"

Вот полностью исправленный код...

функция myOnClick() { //выполняет некоторые другие действия...возвращает false;} Страница без названия

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top