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插件tipswindown与hintbox冲突
Nov 05 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
javascript数组快速打乱重排的方法
Jan 02 Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 Javascript
用javascript读取xml文件读取节点数据
Aug 12 Javascript
鼠标悬停小图标显示大图标
Jan 22 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
Vue 组件间的样式冲突污染
Aug 31 Javascript
Angular使用Restful的增删改
Dec 28 Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 Javascript
20个必会的JavaScript面试题(小结)
Jul 02 Javascript
基于vue+element实现全局loading过程详解
Jul 10 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
咖啡豆分级制度 咖啡豆等级分类 咖啡豆是按口感分类的吗?
2021/03/05 新手入门
UCenter Home二次开发指南
2009/05/28 PHP
基于PHP异步执行的常用方式详解
2013/06/03 PHP
php获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
php最简单的删除目录与文件实现方法
2014/11/28 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
解密效果
2006/06/23 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
2016/12/14 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
使用python绘制常用的图表
2016/08/27 Python
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
python打开windows应用程序的实例
2019/06/28 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
财会自我鉴定范文
2013/12/27 职场文书
法人单位授权委托书范文
2014/10/06 职场文书
迎国庆横幅标语
2014/10/08 职场文书
2014年工人工作总结
2014/11/25 职场文书
邓小平文选读书笔记
2015/06/29 职场文书
交流会主持词
2015/07/02 职场文书
全民创业工作总结
2015/08/13 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
Java完整实现记事本代码
2022/06/16 Java/Android