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 相关文章推荐
将光标定位于输入框最右侧实现代码
Dec 04 Javascript
Jquery实现显示和隐藏的4种简单方式
Aug 28 Javascript
JS实现点击按钮后框架内载入不同网页的方法
May 05 Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 Javascript
JavaScript实现简单的拖动效果
Jul 02 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 Javascript
js中自定义react数据验证组件实例详解
Oct 19 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
微信小程序保存图片到相册权限设置
Apr 09 Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 Javascript
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
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下通过POST还是GET来传值
2008/06/05 PHP
php中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
destoon安全设置中需要设置可写权限的目录及文件
2014/06/21 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
PHP实现抓取迅雷VIP账号的方法
2015/07/30 PHP
CentOS下PHP7的编译安装及MySQL的支持和一些常见问题的解决办法
2015/12/17 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
Yii2.0 RESTful API 基础配置教程详解
2018/12/26 PHP
点击文章内容处弹出页面代码
2009/10/01 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
Angular2 自定义validators的实现方法
2017/07/05 Javascript
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
解决vue-router进行build无法正常显示路由页面的问题
2018/03/06 Javascript
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
mpvue小程序循环动画开启暂停的实现方法
2019/05/15 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
npm qs模块使用详解
2020/02/07 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
Hibernate持久层技术
2013/12/16 面试题
医疗专业毕业生求职信
2014/08/28 职场文书
python批量创建变量并赋值操作
2021/06/03 Python
Appium中scroll和drag_and_drop根据元素位置滑动
2022/02/15 Python
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js