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 相关文章推荐
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 Javascript
js实现网页标题栏闪烁提示效果实例分析
Nov 20 Javascript
详解Javascript继承的实现
Mar 25 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
AngularJS基础 ng-switch 指令简单示例
Aug 03 Javascript
javascript 动态样式添加的简单实现
Oct 11 Javascript
JavaScript 中Date对象的格式化代码方法汇总
Sep 06 Javascript
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
echarts大屏字体自适应的方法步骤
Jul 12 Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 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 $_ENV为空的原因分析
2009/06/01 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
php简单中奖算法(实例)
2017/08/15 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
用jscript实现列出安装的软件列表
2007/06/18 Javascript
AJAX分页的代码(后台asp.net)
2011/02/14 Javascript
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
JavaScript DOM事件(笔记)
2015/04/08 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
Angular.js中下拉框实现渲染html的方法
2017/06/18 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
jQuery使用each遍历循环的方法
2018/09/19 jQuery
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
Python实现登录接口的示例代码
2017/07/21 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
python实现m3u8格式转换为mp4视频格式
2018/02/28 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
Django多数据库的实现过程详解
2019/08/01 Python
解决import tensorflow导致jupyter内核死亡的问题
2021/02/06 Python
用python 绘制茎叶图和复合饼图
2021/02/26 Python
小学班干部竞选演讲稿
2014/04/24 职场文书
公务员检讨书
2014/11/01 职场文书
实习指导老师意见
2015/06/04 职场文书
辩论会主持词
2015/07/03 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python