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 相关文章推荐
js实现权限树的更新权限时的全选全消功能
Feb 17 Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 Javascript
jQuery中:hidden选择器用法实例
Dec 30 Javascript
javascript实现验证身份证号的有效性并提示
Apr 30 Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
Mar 01 Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 Javascript
详解webpack分离css单独打包
Jun 21 Javascript
select标签设置默认选中的选项方法
Mar 02 Javascript
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
JavaScript设计模式之缓存代理模式原理与简单用法示例
Aug 07 Javascript
Javascript模块化机制实现原理详解
Apr 02 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获取远程图片并保存到本地的方法
2015/05/12 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
一些javascript一些题目的解析
2010/12/25 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
YUI模块开发原理详解
2013/11/18 Javascript
使用javascript做的一个随机点名程序
2014/02/13 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
opencv 识别微信登录验证滑动块位置
2018/08/07 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
vue.js实现简单购物车功能
2020/05/30 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
python 字符串格式化代码
2013/03/17 Python
Python中字典和JSON互转操作实例
2015/01/19 Python
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
什么是python的函数体
2020/06/19 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
销售实习自我鉴定
2013/12/07 职场文书
社区七一党员活动方案
2014/01/25 职场文书
记帐员岗位责任制
2014/02/08 职场文书
自主招生学校推荐信
2014/09/26 职场文书
《爱的教育》读书心得
2014/11/08 职场文书
西柏坡导游词
2015/02/05 职场文书
第一军规观后感
2015/06/12 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书