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 相关文章推荐
js每次Title显示不同的名言
Sep 25 Javascript
javascript 多级checkbox选择效果
Aug 20 Javascript
Js sort排序使用方法
Oct 17 Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
写给小白的JavaScript引擎指南
Dec 04 Javascript
js实现人民币大写金额形式转换
Apr 27 Javascript
JS实现颜色梯度与渐变效果完整实例
Dec 30 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 Javascript
如何在JavaScript中谨慎使用代码注释
Jun 21 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 Javascript
vue实现按钮切换图片
Jan 20 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
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
php session的应用详细介绍
2017/03/22 PHP
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
2016/12/23 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
原生JS实现天气预报
2020/06/16 Javascript
python中enumerate的用法实例解析
2014/08/18 Python
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
python的re正则表达式实例代码
2018/01/24 Python
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
python解析json串与正则匹配对比方法
2018/12/20 Python
python最小生成树kruskal与prim算法详解
2019/01/17 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
Ryderwear澳洲官网:澳大利亚高端健身训练装备品牌
2018/09/18 全球购物
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
学生的自我鉴定范文
2013/10/24 职场文书
擅自离岗检讨书
2014/09/12 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python
nginx之内存池的实现
2022/06/28 Servers