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 相关文章推荐
跟着Jquery API学Jquery之一 选择器
Apr 07 Javascript
IE6下focus与blur错乱的解决方案
Jul 31 Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 Javascript
js实现楼层导航功能
Feb 23 Javascript
Javascript实现找不同色块的游戏
Jul 17 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
vue项目中v-model父子组件通信的实现详解
Dec 10 Javascript
vue自定义全局共用函数详解
Sep 18 Javascript
微信小程序引用iconfont图标的方法
Oct 22 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 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/04/03 PHP
Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
2017/07/13 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
开发跨浏览器javascript常见注意事项
2009/01/01 Javascript
jQuery学习笔记之jQuery的动画
2010/12/22 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
深究AngularJS中ng-drag、ng-drop的用法
2017/06/12 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
python使用Berkeley DB数据库实例
2014/09/26 Python
python模拟事件触发机制详解
2018/01/19 Python
Flask之flask-script模块使用
2018/07/26 Python
pycharm安装和首次使用教程
2018/08/27 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
《第一朵杏花》教学反思
2014/04/16 职场文书
班主任评语大全
2014/04/26 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
机关搬迁方案
2014/05/18 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
工作表扬信
2015/01/17 职场文书
老公出轨后的保证书
2015/05/08 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
SpringBoot整合JWT的入门指南
2021/06/29 Java/Android