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 相关文章推荐
DB.ASP 用Javascript写ASP很灵活很好用很easy
Jul 31 Javascript
jquery可见性过滤选择器使用示例
Jun 24 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
移动手机APP手指滑动切换图片特效附源码下载
Nov 30 Javascript
js实现上传图片及时预览
May 07 Javascript
微信小程序自定义组件实现tabs选项卡功能
Jul 14 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
May 20 Javascript
CountUp.js实现数字滚动增值效果
Oct 17 Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
JavaScript 异步时序问题
Nov 20 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按行读取文件时删除换行符的3种方法
2014/05/04 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
图片上传即时显示缩略图的js代码
2009/05/27 Javascript
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
基于jquery的多功能软键盘插件
2012/07/25 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
2013/07/28 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
极力推荐10个短小实用的JavaScript代码段
2016/08/03 Javascript
js中url对象化管理分析
2017/12/29 Javascript
vue 自定义 select内置组件
2018/04/10 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
Node.js API详解之 assert模块用法实例分析
2020/05/26 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
Python实现的文本编辑器功能示例
2017/06/30 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图(部署到云服务器)
2020/02/09 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
Django集成MongoDB实现过程解析
2020/12/01 Python
Python爬虫新手入门之初学lxml库
2020/12/20 Python
导游实习生自荐书
2014/01/28 职场文书
优秀公益广告词大全
2014/03/19 职场文书
环卫工人节活动总结
2014/08/29 职场文书
react如何快速设置文件路径别名
2021/04/28 Javascript