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 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
Apr 19 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
Apr 24 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 Javascript
JS正则子匹配实例分析
Dec 22 Javascript
js实现弹窗暗层效果
Jan 16 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
Apr 28 Javascript
实现vuex与组件data之间的数据同步更新方式
Nov 12 Javascript
区分vue-router的hash和history模式
Oct 03 Javascript
Javascript文本框脚本实现方法解析
Oct 30 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下检测字符串是否是utf8编码的代码
2008/06/28 PHP
PHP使用feof()函数读文件的方法
2014/11/07 PHP
php发送短信验证码完成注册功能
2015/11/24 PHP
详解PHP中的序列化、反序列化操作
2017/03/21 PHP
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
2014/04/12 Javascript
AngularJS的内置过滤器详解
2015/05/14 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
js实现横向拖拽导航条功能
2017/02/17 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
Vue实现简单分页器
2018/12/29 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
jQuery带控制按钮轮播图插件
2020/07/31 jQuery
python文件操作相关知识点总结整理
2016/02/22 Python
对python中使用requests模块参数编码的不同处理方法
2018/05/18 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
python 3.7.0 安装配置方法图文教程
2018/08/27 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
python实现udp传输图片功能
2020/03/20 Python
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
本科毕业生自我鉴定
2013/11/02 职场文书
电台实习生求职信
2014/02/25 职场文书
体育课课后反思
2014/04/24 职场文书
服务理念口号
2014/06/11 职场文书
中职招生先进个人材料
2014/08/31 职场文书
大连导游词
2015/02/12 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
导游词之台湾阿里山
2019/10/23 职场文书
导游词之镇江焦山
2019/11/21 职场文书
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL