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 AspxButton的客户端操作
Jun 26 Javascript
循环 vs 递归浅谈
Feb 28 Javascript
Javascript实现单张图片浏览
Dec 18 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
Dec 29 Javascript
最佳的JavaScript错误处理实践
Jul 16 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
Jul 03 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 Javascript
jfinal与bootstrap的登出实战详解
Nov 27 Javascript
p5.js入门教程和基本形状绘制
Mar 15 Javascript
vue中将html字符串转换成html后遇到的问题小结
Dec 10 Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 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
乐信RP2100的电路分析和打磨
2021/03/02 无线电
兼容性比较好的PHP生成缩略图的代码
2011/01/12 PHP
php笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
php多个文件及图片上传实例详解
2014/11/10 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
php json相关函数用法示例
2017/03/28 PHP
PHP7新功能总结
2019/04/14 PHP
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
Jquery注册事件实现方法
2015/05/18 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
2015/11/15 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
如何用python处理excel表格
2020/06/09 Python
Python如何对XML 解析
2020/06/28 Python
Python分类测试代码实例汇总
2020/07/23 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
《商鞅南门立木》教学反思
2014/02/16 职场文书
查摆剖析材料范文
2014/09/30 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
反四风问题学习心得体会
2016/01/22 职场文书
golang中的空接口使用详解
2021/03/30 Python