JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果


Posted in Javascript onNovember 26, 2015

本文实例讲述了JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果。分享给大家供大家参考,具体如下:

思路:

1、首先用把密码框用txt暂时替代,并赋上默认值 <input type="text" value="请输入密码" />
2、当文本框获取焦点后,把默认值清空,把type改为password。
3、当文本框失去焦点后,把type改为txt,把默认值设为“请输入密码”。

JS代码:

window.onload=function(){
var input=document.getElementById('input');

input.onfocus=function(){


if(this.value=='请输入密码'){



this.value='';



this.type='password';


};

};

input.onblur=function(){


if(!this.value){



this.type = 'text';



this.value = '请输入密码';


};

};
};

HTML代码

<input type="text" value="请输入密码" id="input" />
Javascript 相关文章推荐
使用js获取QueryString的方法小结
Feb 28 Javascript
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
ExtJs纵坐标值重复问题的解决方法
Feb 27 Javascript
js实现DOM走马灯特效的方法
Jan 21 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
详解express与koa中间件模式对比
Aug 07 Javascript
详解如何去除vue项目中的#——History模式
Oct 13 Javascript
vue实现的下拉框功能示例
Jan 29 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 Javascript
javascript实现前端成语点击验证优化
Jun 24 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 Javascript
学习JavaScript设计模式(接口)
Nov 26 #Javascript
Jquery中request和request.form和request.querystring的区别
Nov 26 #Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
Nov 26 #Javascript
JS延时提示框实现方法详解
Nov 26 #Javascript
js使用cookie记录用户名的方法
Nov 26 #Javascript
Bootstrap每天必学之导航
Nov 26 #Javascript
js过滤HTML标签完整实例
Nov 26 #Javascript
You might like
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
非常经典的PHP文件上传类分享
2016/05/15 PHP
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
通过上下左右键和回车键切换光标实现代码
2013/03/08 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
JavaScript调试技巧之console.log()详解
2014/03/19 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
基于JQuery实现图片上传预览与删除操作
2016/05/24 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
React组件之间的通信的实例代码
2017/06/27 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
详解VUE 数组更新
2017/12/16 Javascript
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
JS面向对象之多选框实现
2020/01/17 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
Python实现Linux的find命令实例分享
2017/06/04 Python
使用python为mysql实现restful接口
2018/01/05 Python
在python里面运用多继承方法详解
2019/07/01 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
纽约香氛品牌:NEST Fragrance
2018/10/15 全球购物
学校门卫岗位职责
2014/03/16 职场文书
铅球加油稿100字
2014/09/26 职场文书
政工师工作总结2015
2015/05/26 职场文书
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL