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 相关文章推荐
基于jQuery架构javascript基础体系
Jan 01 Javascript
原生JS实现表单checkbook获取已选择的值
Jul 21 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
Feb 21 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
Oct 14 Javascript
Window.Open打开窗体和if嵌套代码
Apr 15 Javascript
bootstrap fileinput 插件使用项目总结(经验)
Feb 22 Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
May 02 Javascript
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
JS前端使用canvas实现物体的点选示例
Aug 05 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使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
深入剖析浏览器退出之后php还会继续执行么
2016/05/17 PHP
PHP中使用mpdf 导出PDF文件的实现方法
2018/10/22 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
PHP中16个高危函数整理
2019/09/19 PHP
javascript静态的url如何传递
2007/05/03 Javascript
javascript动态加载二
2012/08/22 Javascript
微信小程序 实战实例开发流程详细介绍
2017/01/05 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
cnpm加速Angular项目创建的方法
2018/09/07 Javascript
如何在JS文件中获取Vue组件
2020/09/16 Javascript
python基础教程之元组操作使用详解
2014/03/25 Python
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
对python的文件内注释 help注释方法
2018/05/23 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
python print出共轭复数的方法详解
2019/06/25 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
python实现XML解析的方法解析
2019/11/16 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
Python实现微信好友的数据分析
2019/12/16 Python
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
电子狗项圈:eDog Australia
2019/12/04 全球购物
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
工程专业毕业生自荐信范文
2013/12/25 职场文书
人力资源部培训专员岗位职责
2014/01/02 职场文书
会计出纳员的自我评价
2014/01/15 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
导游词之无锡梅园
2019/11/28 职场文书