JS实现Input密码框提示信息的两种方法

作者:青柠时间:2026-10-29 20:28:46浏览:401

本文介绍在Web开发中为密码输入框添加提示信息的两种实现方式。首先分析通过JavaScript动态切换文本框与密码框显示状态的方法,解决部分浏览器不支持动态修改input type属性的问题。随后介绍HTML5原生placeholder属性的简洁实现方案,并提供相关代码示例与工具推荐。

JavaScript实现密码框提示信息的方案

本文详细介绍在Web开发中为密码输入框添加提示信息的实现方案,供开发者参考。

近期需求要求在密码输入框中显示“请输入密码”的提示信息。起初考虑通过动态修改input元素的type属性来实现,但发现部分浏览器(如IE)中input的type属性为只读,无法动态更改。因此,采用其他替代方案,具体实现如下。

动态切换输入框显示状态


<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属性简化实现

补充说明:

上述复杂的JavaScript实现逻辑,实际上可以通过HTML5提供的placeholder属性直接完成。具体代码示例如下。

代码示例:

<input type="password" id="pass5" placeholder="请输入密码" name="pass5" value=""/>

此外,推荐一款实用的JavaScript压缩、格式化与加密工具,功能强大,特别适合需要代码加密的场景:

JavaScript压缩/格式化/加密工具:http://tools.jb51.net/code/jscompress

另外,上述工具中使用的加密方式基于eval函数。本站还提供了一款专门针对eval函数加密的解密工具,实用性强:

js的eval方法在线加密解密工具:http://tools.jb51.net/password/evalencode

希望本文内容对JavaScript程序设计有所帮助。

作者最新文章