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 相关文章推荐
一个不错的应用,用于提交获取文章内容,不推荐用
Mar 03 Javascript
javascript 有用的脚本函数
May 07 Javascript
网页防止tab键的使用快速解决方法
Nov 07 Javascript
通过Javascript读取本地Excel文件内容的代码示例
Apr 08 Javascript
js获取ajax返回值代码
Apr 30 Javascript
JavaScript模拟实现键盘打字效果
Jun 29 Javascript
js中toString()和String()区别详解
Mar 23 Javascript
深入学习 JavaScript中的函数调用
Mar 23 Javascript
AngularJs实现聊天列表实时刷新功能
Jun 15 Javascript
vue事件修饰符和按键修饰符用法总结
Jul 25 Javascript
webpack的pitching loader详解
Sep 23 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
Sep 05 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
神族 Protoss 剧情介绍
2020/03/14 星际争霸
php Try Catch异常测试
2009/03/01 PHP
php中stream(流)的用法
2014/03/25 PHP
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
PHP+MySQL高并发加锁事务处理问题解决方法
2018/04/30 PHP
使用CSS3实现字体颜色渐变的实现
2021/03/09 HTML / CSS
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
jQuery Ajax调用WCF服务详细教程
2015/03/31 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
JS实现页面数据无限加载
2016/09/13 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
详解react-refetch的使用小例子
2019/02/15 Javascript
vue 使用高德地图vue-amap组件过程解析
2019/09/07 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
2019/09/24 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
python根据时间生成mongodb的ObjectId的方法
2015/03/13 Python
Python functools模块学习总结
2015/05/09 Python
Anaconda下安装mysql-python的包实例
2018/06/11 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
python实现图片转换成素描和漫画格式
2020/08/19 Python
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
美国最大的网络男装服装品牌:Bonobos
2017/05/25 全球购物
2014元旦晚会策划方案
2014/02/19 职场文书
安全标准化实施方案
2014/02/20 职场文书
图书借阅制度范本
2015/08/06 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL
MySQL 5.7常见数据类型
2021/07/15 MySQL
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电