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 代码也可以变得优美的实现方法
Jun 22 Javascript
javascript 面向对象,实现namespace,class,继承,重载
Oct 29 Javascript
js的toUpperCase方法用法实例
Jan 27 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
JS常用正则表达式总结【经典】
May 12 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
VuePress 快速踩坑小结
Feb 14 Javascript
Vue框架TypeScript装饰器使用指南小结
Feb 18 Javascript
详解微信小程序开发用户授权登陆
Apr 24 Javascript
微信小程序 下拉刷新及上拉加载原理解析
Nov 06 Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 Javascript
Element Badge标记的使用方法
Jul 27 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
简单的移动设备检测PHP脚本代码
2011/02/19 PHP
Prototype源码浅析 Number部分
2012/01/16 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
js 3种归并操作的实例代码
2013/10/30 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
JavaScript实现将文本框的值插入指定位置的方法
2015/08/13 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
JS实现动画兼容性的transition和transform实例分析
2016/12/13 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
React实践之Tree组件的使用方法
2017/09/30 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
深入理解vue中slot与slot-scope的具体使用
2018/01/26 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
python删除文件夹下相同文件和无法打开的图片
2019/07/16 Python
Python定时从Mysql提取数据存入Redis的实现
2020/05/03 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
学习决心书范文
2014/03/11 职场文书
机械操作工岗位职责
2014/08/08 职场文书
鸟的天堂导游词
2015/01/31 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
MySQL 可扩展设计的基本原则
2021/05/14 MySQL
react中的DOM操作实现
2021/06/30 Javascript
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python