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 相关文章推荐
jQuery toggle()设置CSS样式
Nov 05 Javascript
jquery zTree异步加载简单实例分享
Feb 05 Javascript
详解Javascript 装载和执行
Nov 17 Javascript
jQuery()方法的第二个参数详解
Apr 29 Javascript
jQuery实现获取隐藏div高度的方法示例
Feb 09 Javascript
原生js实现选项卡功能
Mar 08 Javascript
npm全局模块卸载及默认安装目录修改方法
May 15 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
使用Node.js在深度学习中做图片预处理的方法
Sep 18 Javascript
微信小程序点击保存图片到本机功能
Dec 13 Javascript
JavaScript实现轮播图片完整代码
Mar 07 Javascript
JS实现前端路由功能示例【原生路由】
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
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
php 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
2013/02/26 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
json中换行符的处理方法示例介绍
2014/06/10 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
bootstrap table实现合并单元格效果
2018/12/24 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
electron踩坑之dialog中的callback解决
2020/10/06 Javascript
python在linux中输出带颜色的文字的方法
2014/06/19 Python
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
高中生学习的自我评价
2013/12/14 职场文书
幼儿园英语教学反思
2014/01/30 职场文书
2014年教师党员公开承诺书
2014/05/28 职场文书
音乐节策划方案
2014/06/09 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
大学生见习总结报告
2015/06/24 职场文书
Python if else条件语句形式详解
2022/03/24 Python
Go语言安装并操作redis的go-redis库
2022/04/14 Golang