JavaScript如何实现在文本框(密码框)输入提示语


Posted in Javascript onDecember 25, 2015

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

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.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 相关文章推荐
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
Nov 23 Javascript
js 操作select和option常用代码整理
Dec 13 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
javascript中的parseInt和parseFloat区别
Jul 12 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
jquery实现清新实用的网页菜单效果
Aug 28 Javascript
javascript汉字拼音互转的简单实例
Oct 09 Javascript
JS简单验证上传文件类型的方法
Apr 17 Javascript
JS中用EL表达式获取上下文参数值的方法
Mar 28 Javascript
详释JavaScript执行环境与执行栈
Apr 02 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 Javascript
JS不要再到处使用绝对等于运算符了
Apr 30 Javascript
jquery实现图片预加载
Dec 25 #Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
Dec 25 #Javascript
使用堆实现Top K算法(JS实现)
Dec 25 #Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 #Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
Dec 25 #Javascript
尝试动手制作javascript放大镜效果
Dec 25 #Javascript
js操作cookie保存浏览记录的方法
Dec 25 #Javascript
You might like
php线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
javascript面向对象编程(一) 实例代码
2010/06/25 Javascript
jQuery中append()方法用法实例
2015/01/08 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
2016/03/02 Javascript
JS iFrame加载慢怎么解决
2016/05/13 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
Python udp网络程序实现发送、接收数据功能示例
2019/12/09 Python
AUC计算方法与Python实现代码
2020/02/28 Python
Ibatis中如何提高SQL Map的性能
2013/05/11 面试题
大学生毕业的自我鉴定
2013/11/13 职场文书
毕业生找工作推荐信
2013/11/21 职场文书
课外小组活动总结
2014/08/27 职场文书
2015年行政部工作总结
2015/04/28 职场文书
小学生安全保证书
2015/05/09 职场文书
搭讪开场白台词大全
2015/05/28 职场文书
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电
Nginx 匹配方式
2022/05/15 Servers
linux目录管理方法介绍
2022/06/01 Servers