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 相关文章推荐
JavaScript怎么判断图片是否加载完成以便获取其尺寸
May 08 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
May 28 Javascript
Node.js中child_process实现多进程
Feb 03 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
jQuery简单实现遍历单选框的方法
Mar 06 Javascript
Three.js如何实现雾化效果示例代码
Sep 27 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
解决vue多个路由共用一个页面的问题
Mar 12 Javascript
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
自定义vue组件发布到npm的方法
May 09 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
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学习之数组值的操作
2011/04/17 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
JS代码格式化和语法着色V2
2006/10/14 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
2012/04/07 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
2014/06/09 Javascript
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
基于JS实现移动端左滑删除功能
2017/07/28 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
elementUI select组件默认选中效果实现的方法
2019/03/25 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
python列表每个元素同增同减和列表元素去空格的实例
2019/07/20 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
使用 Python 在京东上抢口罩的思路详解
2020/02/27 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
2021/03/03 Python
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
英文版网络工程师求职信
2013/10/28 职场文书
数学教育专业求职信
2014/07/22 职场文书
公司委托书怎么写
2014/08/02 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang