js는 입력 상자의 유형 속성을 동적으로 수정합니다(구현 방법 분석)_javascript 기술

달성할 효과: 입력 상자. 입력 상자가 초점을 얻지 못하면 값은 "password"입니다. 입력 상자가 초점을 잃으면 입력 내용은 "*****"로 표시됩니다. 🎜>

<입력 이름=”비밀번호” 유형=”텍스트” id=”showPwd” tabindex=”2″ 클래스=”입력” 값=”비밀번호” />

다음 js를 직접 생각해 보겠습니다

$("#showPwd").focus(function(){

$(this).attr('type','password');
});

기대했던 효과를 얻지 못했고, 포착되지 않은 예외 유형 속성을 변경할 수 없음 오류가 발생한 것으로 확인되었습니다. jQuery 1.42 소스 코드 라인 1488

// 유형 속성 변경을 허용할 수 없습니다(IE에서 문제를 일으키기 때문입니다)

if ( name === “type” && rtype.test( elem.nodeName ) && elem.parentNode ) {
jQuery.error( “유형 속성을 변경할 수 없습니다.” );
}

jQuery가 Yuansheng의 JS를 수정할 수 없으면 어떻게 되나요?

$("#pwd").focus(function(){

$("#pwd")[0].type = 'password';
$("#pwd").val( "");
});

FF에서는 비밀번호 입력 상자 유형을 "password"로 수정하고 값을 공백으로 설정할 수 있지만 IE에서는 유형 속성을 얻을 수 없다는 메시지가 표시되고 이 명령이 지원되지 않는 것을 확인했습니다. 정말 구할 수 없는지 확인하기 위해 유형을 팝업해 볼까요?

$(“#showPwd”).focus(function(){

alert($(“#showPwd”)[0].type);
$(“#showPwd”)[0]. 유형 = '비밀번호';
$("#showPwd").val("");
});

텍스트가 뜬 걸 보니, 못 받는 건 아닌데, IE에서는 수정할 수 없는 걸로 밝혀졌습니다. 따라서 우리는 먼저 제거한 다음 비밀번호 유형의 비밀번호 입력 상자를 생성할 수 있다고 생각했습니다.

다음과 같은 비밀번호 입력창

<입력 이름=”비밀번호” 유형=”비밀번호” id=”비밀번호” 클래스=”입력” 스타일=”표시: 없음;”

$(“#showPwd”).focus(function() {

var text_value = $(this).val();

if (text_value == this.defaultValue) {
$( "#showPwd").hide();
$("#password").show().focus();
}
});
$("#password"). Blur(function() {
var text_value = $(this).val();
if (text_value == “”) {
$(“#showPwd”).show();
$(“#password”).hide();
}
});

최종 효과: 입력 상자에 초점이 맞춰지면 입력 내용이 "****"로 표시되고, 내용이 비어 있으면 "비밀번호"가 표시됩니다.