Home > Web Front-end > JS Tutorial > body text

js实现input密码框提示信息的方法(附html5实现方法)_javascript技巧

WBOY
Release: 2016-05-16 15:20:04
Original
1222 people have browsed it

本文实例讲述了js实现input密码框提示信息的方法。分享给大家供大家参考,具体如下:

今天我们主管说要在密码框加入个"请输入密码"的提示信息,第一次的时候本来想着用修改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>
Copy after login

补充:

其实上面一大段的代码,用html5的一个 placeholder 属性就解决了.代码如下:

复制代码 代码如下:

PS:这里再为大家推荐一款非常好用的JavaScript压缩、格式化与加密工具,功能非常强大(对于想让代码加密的朋友不妨试试这里的js加密功能):

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

另外,上面这款js工具中的加密使用的是eval函数加密形式,对此本站还提供了如下这款针对eval函数加密的解密工具,非常强大实用!

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

希望本文所述对大家JavaScript程序设计有所帮助。

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!