> 웹 프론트엔드 > JS 튜토리얼 > 비밀번호 입력 상자 프롬프트 정보를 js로 구현하는 방법(html5 구현 방법 사용)_javascript 기술

비밀번호 입력 상자 프롬프트 정보를 js로 구현하는 방법(html5 구현 방법 사용)_javascript 기술

WBOY
풀어 주다: 2016-05-16 15:20:04
원래의
1323명이 탐색했습니다.

이 글의 예시에서는 js에서 비밀번호 입력 상자 프롬프트 정보를 구현하는 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

오늘 우리 감독님이 비밀번호 상자에 "비밀번호를 입력하세요"라는 프롬프트 메시지를 추가해야 한다고 했습니다. 처음 입력 유형 속성을 수정하는 방법을 사용하려고 생각했을 때 일부 특수 브라우저에서는 지원하지 않는 것으로 나타났습니다. IE 입력의 유형 속성은 읽기 전용이며 동적으로 설정할 수 없으므로 다른 방법을 사용하십시오.

<input type="text" onfocus="changeTip(this);" id="passText" name="passText" value="请输入密码"/>
<input style="display: none;" type="password" onblur="changeTip(this);" id="pass" placeholder="" name="pass" value=""/>
<script type="text/javascript">
function changeTip(th){
 var passText = document.getElementById('passText');
 var pass = document.getElementById('pass');
 if(th.id == 'pass'){
  if(th.value == '' || th.value.length == 0 ){
   passText.style.display='';
   pass.style.display='none';
  }
 }else{
  passText.style.display='none';
  pass.style.display='';
  pass.focus();
 }
}
</script>
로그인 후 복사

보충:

사실 위의 큰 코드 부분은 HTML5의 placeholder 속성을 사용하여 해결할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

PS: 여기서 매우 강력하고 사용하기 쉬운 JavaScript 압축, 서식 지정 및 암호화 도구를 권장합니다(코드를 암호화하려는 경우 시도해 보고 싶을 수도 있습니다. 여기에서 js 암호화 기능을 사용해 보세요.

JavaScript 압축/포맷/암호화 도구: http://tools.jb51.net/code/jscompress

또한 위 js 도구의 암호화는 평가 함수 암호화 형식을 사용합니다. 이를 위해 이 사이트에서는 매우 강력하고 실용적인 평가 함수 암호화를 위한 다음과 같은 암호 해독 도구도 제공합니다!

JS 평가 방법 온라인 암호화 및 복호화 도구: http://tools.jb51.net/password/evalencode

이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿