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 option删除代码集合
Nov 12 Javascript
JS的参数传递示例介绍
Feb 08 Javascript
node.js正则表达式获取网页中所有链接的代码实例
Jun 03 Javascript
JS中getYear()和getFullYear()区别分析
Jul 04 Javascript
推荐10 款 SVG 动画的 JavaScript 库
Mar 24 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
Jun 23 Javascript
jQuery事件用法详解
Oct 06 Javascript
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
详解如何在vue项目中使用layui框架及采坑
May 05 Javascript
Vue——前端生成二维码的示例
Dec 19 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 危险函数解释 分析
2009/04/22 PHP
phpmyadmin 3.4 空密码登录的实现方法
2010/05/29 PHP
Yii学习总结之安装配置
2015/02/22 PHP
php支持断点续传、分块下载的类
2016/05/02 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
PHP实现的数组和XML文件相互转换功能示例
2018/03/15 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
JS类库Bindows1.3中的内存释放方式分析
2007/03/08 Javascript
js关闭当前页面(窗口)的几种方式总结
2013/03/05 Javascript
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
实例解析Array和String方法
2016/12/14 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
JavaScript制作3D旋转相册
2020/08/02 Javascript
Javascript数组及类数组相关原理详解
2020/10/29 Javascript
跟老齐学Python之数据类型总结
2014/09/24 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
Java面试题:Java类的Main方法如果是Private将会怎么样
2016/08/18 面试题
程序员经常用到的UNIX命令
2015/04/13 面试题
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
机械设计职业生涯规划书
2013/12/27 职场文书
项目施工员岗位职责
2014/03/09 职场文书
四群教育工作实施方案
2014/03/26 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
物业公司管理制度
2015/08/05 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书
redis数据一致性的实现示例
2022/03/18 Redis
开发者首先否认《遗弃》被取消的传言
2022/04/11 其他游戏