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 相关文章推荐
javascript之卸载鼠标事件的代码
May 14 Javascript
jquery checkbox,radio是否选中的判断代码
Mar 20 Javascript
JavaScript基本编码模式小结
May 23 Javascript
javascript图像处理—仿射变换深度理解
Jan 16 Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
js对象与打印对象分析比较
Apr 23 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
详解AngularJS中的表格使用
Jun 16 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
Jan 23 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
微信小程序开发问题之wx.previewImage
Dec 25 Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 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
PHP URL路由类实例
2013/11/12 PHP
php fsockopen解决办法 php实现多线程
2014/01/20 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
图片上传插件jquery.uploadify详解
2013/11/15 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
javascript中数组array及string的方法总结
2014/11/28 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
jquery滚动加载数据的方法
2015/03/09 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
谈谈Jquery中的children find 的区别有哪些
2015/10/19 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
JavaScript封闭函数及常用内置对象示例
2019/05/13 Javascript
JS实现超级好看的鼠标小尾巴特效
2020/12/01 Javascript
使用Python下载Bing图片(代码)
2013/11/07 Python
python打开网页和暂停实例
2014/09/30 Python
python中子类继承父类的__init__方法实例
2016/12/15 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
解决django的template中如果无法引用MEDIA_URL问题
2020/04/07 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
采购员的工作职责
2013/12/26 职场文书
未婚证明书模板
2014/10/08 职场文书
校本课程教学计划
2015/01/19 职场文书
档案管理员岗位职责
2015/02/12 职场文书
通知的格式范文
2015/04/27 职场文书
幼儿园家长反馈意见
2015/06/03 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript