서버 상호작용 없이 자바스크립트에서 버튼 클릭 잡기

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>

핵심은 입력이 버튼 유형이고 제출이 아니라는 것입니다.나는 원기 ID로 요소를 검색하는 라이브러리입니다.

다른 팁

클릭할 때마다 서버에 요청을 수행하는 것으로 들리는데, 페이지를 로드할 때마다 비밀번호 상자가 재설정되는 것은 브라우저의 일반적인 동작입니다.

ASP.NET을 사용한다고는 말하지 않았지만...

의도적으로 ASP.NET은 포스트백 중에 모드가 Password인 TextBox 컨트롤의 값을 지웁니다.다음 코드를 사용하여 하위 클래스에서 이 문제를 해결합니다.

// 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();">

양식이 게시되지 않도록 하려면 "제출" 대신 "버튼"을 사용해야 합니다.

나는 브라우저가 비밀번호 필드의 값을 설정하려고 시도하는 스크립트에 문제가 있다고 가정합니다.

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()"

완전히 수정된 코드는 다음과 같습니다.

function myonclick () {// 다른 작업을 수행 ...거짓을 반환;} 제목없는 페이지

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top