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 相关文章推荐
将jQuery应用于login页面的问题及解决
Oct 17 Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
Jan 08 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
Feb 08 Javascript
node.js中的fs.utimes方法使用说明
Dec 15 Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 Javascript
js如何实现淡入淡出效果
Nov 18 Javascript
jquery使用on绑定a标签无效 只能用live解决
Jun 02 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
手把手教你 CKEDITOR 4 扩展插件制作
Jun 18 Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 Javascript
vue 项目@change多个参数传值多个事件的操作
Jan 29 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
深入了解php4(1)--回到未来
2006/10/09 PHP
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
jquery validate在ie8下的bug解决方法
2013/11/13 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
深入探讨前端框架react
2015/12/09 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
微信小程序开发技巧汇总
2019/07/15 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
2019/09/25 Javascript
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
对python中return和print的一些理解
2017/08/18 Python
python中map()函数的使用方法示例
2017/09/29 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
深入分析python中整型不会溢出问题
2018/06/18 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
python实点云分割k-means(sklearn)详解
2020/05/28 Python
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
淘宝中秋节活动方案
2014/01/31 职场文书
中国好声音广告词
2014/03/18 职场文书
班组建设经验交流材料
2014/05/12 职场文书
初中班级口号
2014/06/09 职场文书
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
教师查摆问题及整改措施
2014/10/11 职场文书
2014年销售经理工作总结
2014/12/01 职场文书
2015年度企业工作总结
2015/05/21 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书