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


Posted in Javascript onJanuary 14, 2016

本文实例讲述了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>

补充:

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

<input type="password" id="pass5" placeholder="请输入密码" name="pass5" value=""/>
Javascript 相关文章推荐
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
Nov 30 Javascript
JS获得图片alt信息的方法
Apr 01 Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
基于jquery实现二级联动效果
Mar 30 jQuery
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
Vue-Router的使用方法
Sep 05 Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 Javascript
JavaScript实现京东放大镜效果
Dec 03 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 Javascript
vue实现移动端div拖动效果
Mar 03 Vue.js
jQuery div拖拽用法实例
Jan 14 #Javascript
javascript检测flash插件是否被禁用的方法
Jan 14 #Javascript
分享jQuery插件的学习笔记
Jan 14 #Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 #Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 #Javascript
JavaScript基本语法学习教程
Jan 14 #Javascript
JavaScript对象参数的引用传递
Jan 14 #Javascript
You might like
一个程序下载的管理程序(四)
2006/10/09 PHP
社区(php&amp;&amp;mysql)三
2006/10/09 PHP
PHP clearstatcache()函数详解
2010/03/02 PHP
php preg_replace替换实例讲解
2013/11/04 PHP
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
Zend Framework处理Json数据方法详解
2016/12/09 PHP
使用PHP反射机制来构造&quot;CREATE TABLE&quot;的sql语句
2019/03/21 PHP
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
弹出最简单的模式化遮罩层的js代码
2013/12/04 Javascript
JS实现模仿微博发布效果实例代码
2013/12/16 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
2017/03/23 Javascript
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
nodejs搭建本地服务器轻松解决跨域问题
2018/03/21 NodeJs
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
原生js实现照片墙效果
2020/10/13 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
Python中规范定义命名空间的一些建议
2016/06/04 Python
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
详解python opencv、scikit-image和PIL图像处理库比较
2019/12/26 Python
Tensorflow 多线程设置方式
2020/02/06 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
泰坦健身器材:Titan Fitness
2018/02/13 全球购物
美国轮胎网站:Priority Tire
2018/11/28 全球购物
南京市纪委监察局整改方案
2014/09/16 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
订货会主持词
2015/07/01 职场文书
活动宣传稿范文
2015/07/23 职场文书