JavaScript实现输入框(密码框)出现提示语


Posted in Javascript onJanuary 12, 2016

有时候我们需要在登陆表单有一些提示语言,比如“请输入用户名”和“请输入密码”等语言,至于用户名好说,但是在密码框中出现“请输入密码”这样的语言就有点麻烦了,因为在密码框输入的内容不会以明码显示。如果动态的控制type属性的话就有兼容性问题,如果input已经存在于页面中的话,在IE8和IE8以下浏览器中,type属性是只读的。所以就得想其他办法,代码如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="https://3water.com/" />
<title>三水点靠木</title>
<style type="text/css">
#tx{
width:100px;
}
#pwd{
display:none;
width:100px;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
var tx=document.getElementById("tx");
var pwd=document.getElementById("pwd"); 
tx.onfocus=function(){ 
if(this.value!="密码") 
return; 
this.style.display="none"; 
pwd.style.display="block"; 
pwd.value=""; 
pwd.focus(); 
} 
pwd.onblur=function(){ 
if(this.value!=""){
return; 
} 
this.style.display="none"; 
tx.style.display=""; 
tx.value="密码"; 
} 
}
</script> 
</head> 
<body> 
<input type="text" value="密码" id="tx"/> 
<input type="password" id="pwd" /> 
</body> 
</html>

以上代码实现了我们的要求,可以出现明码的提示,当输入密码的时候就是以密码方式输入。

实现的原理非常的简单,在默认状态以type="text"文本框显示,当点击文本框的时候,以type="password"密码框显示,原来显示的文本框隐藏,也就是说做了一个替换而已。

Javascript 相关文章推荐
JavaScript版DateAdd和DateDiff函数代码
Mar 01 Javascript
js、jquery图片动画、动态切换示例代码
Jun 03 Javascript
angularJS提交表单(form)
Feb 09 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
jQuery使用$.ajax进行即时验证的方法
Dec 08 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
利用JS轻松实现获取表单数据
Dec 06 Javascript
微信小程序 判断手机号的实现代码
Apr 19 Javascript
AngularJS自定义表单验证功能实例详解
Aug 24 Javascript
JavaScript find()方法及返回数据实例
Apr 30 Javascript
javascript自动恢复文本框点击清除后的默认文本
Jan 12 #Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 #Javascript
jquery模拟实现鼠标指针停止运动事件
Jan 12 #Javascript
js实现字符串和数组之间相互转换操作
Jan 12 #Javascript
js右下角弹出提示框示例代码
Jan 12 #Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 #Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 #Javascript
You might like
php 什么是PEAR?(第三篇)
2009/03/19 PHP
PHP实现手机号码中间四位用星号(*)隐藏的自定义函数分享
2014/09/27 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
PHP中session跨子域的三种实现方法
2016/07/25 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
2018/10/15 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
JavaScript实现快速排序(自已编写)
2012/12/19 Javascript
关于js遍历表格的实例
2013/07/10 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
jQuery判断元素上是否绑定了指定事件的方法
2015/03/17 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
2015/08/28 Javascript
AngularJS基础 ng-readonly 指令简单示例
2016/08/02 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
python多线程socket编程之多客户端接入
2017/09/12 Python
pycharm运行和调试不显示结果的解决方法
2018/11/30 Python
关于Python作用域自学总结
2019/06/10 Python
OpenCV 模板匹配
2019/07/10 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
Python如何实现线程间通信
2020/07/30 Python
python Selenium 库的使用技巧
2020/10/16 Python
最好的商品表达自己:Cafepress
2019/09/04 全球购物
省优秀教师事迹材料
2014/01/30 职场文书
单位工程竣工验收方案
2014/03/16 职场文书
成立公司计划书
2014/05/07 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
英语教师个人工作总结
2015/02/09 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
2015年教师党员个人总结
2015/11/24 职场文书