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

jQuery: 입력 필드 유형 변경

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

실행 시 제공된 코드:

$(document).ready(function() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">throw "type property can't be changed";

로그인 후 복사