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 innerHTML 改变div内容的方法
Aug 03 Javascript
javascript:void(0)使用探讨
Aug 27 Javascript
js实现网页抽奖实例
Aug 05 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 Javascript
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 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中for循环语句的几种变型
2007/03/16 PHP
php生成随机密码的几种方法
2011/01/17 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
使用js简单实现了tree树菜单
2013/11/20 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
浅析javascript的return语句
2015/12/15 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
jQuery根据ID、CLASS、等获取对象的实例
2016/12/04 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
Vue实现数据表格合并列rowspan效果
2020/11/30 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
2020/05/12 Javascript
[01:11:27]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Optic
2018/04/03 DOTA
Python中取整的几种方法小结
2017/01/06 Python
Python模拟登录的多种方法(四种)
2018/06/01 Python
使用python模拟命令行终端的示例
2019/08/13 Python
如何基于python操作json文件获取内容
2019/12/24 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
世界上最大的乐器零售商:Guitar Center
2017/11/07 全球购物
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
大学生的四年学习自我评价
2013/12/13 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
求职简历自我评价2015
2015/03/10 职场文书
检讨书格式
2015/05/07 职场文书
远程教育集中轮训基层干部培训班学习心得体会
2016/01/09 职场文书
MySQL CHAR和VARCHAR该如何选择
2021/05/31 MySQL
mysql数据库如何转移到oracle
2022/12/24 MySQL