>웹 프론트엔드 >JS 튜토리얼 >jQuery를 사용하여 입력 필드 유형을 비밀번호에서 텍스트로 변경하는 데 실패하는 이유는 무엇입니까?

jQuery를 사용하여 입력 필드 유형을 비밀번호에서 텍스트로 변경하는 데 실패하는 이유는 무엇입니까?

Linda Hamilton
Linda Hamilton원래의
2024-11-20 04:04:02180검색

Why Does Changing an Input Field Type From Password to Text With jQuery Fail?

jQuery: 입력 필드 유형 변경

이 시나리오에는 jQuery를 사용하여 입력 필드의 유형 속성을 비밀번호에서 텍스트로 변경하려는 시도가 포함됩니다. . 그러나 노력은 성공하지 못했습니다.

실행 시 제공된 코드:

$(document).ready(function() {</p><pre class="brush:php;toolbar:false">// #login-box password field
$('#password').attr('type', 'text');
$('#password').val('Password');

});

다음 유형으로 #password 필드를 타겟팅하는 것을 목표로 합니다. 비밀번호로 지정된 속성을 선택하고 이를 표준 텍스트 필드로 전환합니다. 이후 변경된 필드를 "비밀번호"라는 텍스트로 채우는 것을 목표로 합니다.

그러나 코드가 있음에도 불구하고 원하는 결과는 실현되지 않습니다. 이유는 무엇입니까?

문제의 핵심은 브라우저 기능의 보안 문제에 있습니다. 입력 필드의 유형, 특히 비밀번호와 같은 보안 유형에서 일반 유형으로 변경하면 브라우저에서 구현된 보안 조치가 실행됩니다. 이는 Safari와 같은 브라우저에서 흔히 관찰됩니다.

이 딜레마를 해결하려면 베어 DOM(Document Object Model)을 사용하는 해결 방법이 좋습니다.

<br>var pass = document.createElement('input');<br>pass.type = 'password';<br>document.body.appendChild(pass);<br>pass.type = 'text';<br>pass.value = 'Password';<br>

이 접근 방식은 원하는 결과를 얻으면서 jQuery의 한계를 우회합니다.

jQuery를 통한 type 속성은 IE 내에서 문제가 발생합니다. jQuery의 소스 코드는 다음 제약 조건을 나타냅니다.

<br>// 유형 속성 변경을 허용할 수 없습니다(IE에서 문제를 일으키기 때문에)<br>if ( name == " 유형" && jQuery.nodeName( elem, "input" ) && elem.parentNode )</p>
<pre class="brush:php;toolbar:false">throw "type property can't be changed";

따라서 jQuery를 사용하여 입력 필드의 유형을 비밀번호에서 텍스트로 변경하려고 할 때 어려움이 있을 때는 원시 DOM을 활용하는 것이 좋습니다. 위에 설명된 방법을 사용하면 브라우저에 부과된 보안 제한 사항을 해결할 수 있습니다.

위 내용은 jQuery를 사용하여 입력 필드 유형을 비밀번호에서 텍스트로 변경하는 데 실패하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.