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 firefox兼容ie的dom方法脚本
May 18 Javascript
js变量以及其作用域详解
Jul 18 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
Nov 17 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
Jan 14 Javascript
jQuery 动态云标签插件
Nov 11 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
May 02 Javascript
Angular之toDoList的实现代码示例
Dec 02 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
手动下载Chrome并解决puppeteer无法使用问题
Nov 12 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
May 29 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中curl和file_get_content的区别
2014/05/10 PHP
php实现高效获取图片尺寸的方法
2014/12/12 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
初识javascript 文档碎片
2010/07/13 Javascript
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
jquery+css3打造一款ajax分页插件(自写)
2014/06/18 Javascript
Javascript基础教程之break和continue语句
2015/01/18 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
JavaScript中split与join函数的进阶使用技巧
2016/05/03 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
对于js垃圾回收机制的理解
2017/09/14 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
关于django 1.10 CSRF验证失败的解决方法
2019/08/31 Python
python爬虫要用到的库总结
2020/07/28 Python
python Tornado框架的使用示例
2020/10/19 Python
菲律宾旅游网站:Expedia菲律宾
2017/10/11 全球购物
中专生学习生活的自我评价分享
2013/10/27 职场文书
初一家长会邀请函
2014/01/31 职场文书
社区道德讲堂实施方案
2014/03/21 职场文书
捐款活动总结
2014/08/27 职场文书
党员先进性教育整改措施
2014/09/18 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
2014年劳动部工作总结
2014/12/11 职场文书
2015年党建工作总结
2015/03/30 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
初中物理教学反思
2016/02/19 职场文书