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 相关文章推荐
Javascript的IE和Firefox兼容性汇编
Jul 01 Javascript
Prototype使用指南之dom.js
Jan 10 Javascript
List Information About the Binary Files Used by an Application
Jun 18 Javascript
如何用js控制css中的float的代码
Aug 16 Javascript
JS 日期比较大小的简单实例
Jan 13 Javascript
js数组去重的常用方法总结
Jan 24 Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 Javascript
详解JavaScript数组的操作大全
Oct 19 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
May 03 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
May 11 Javascript
微信小程序rich-text富文本用法实例分析
May 20 Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 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中去掉字符串首尾空格的方法
2012/05/19 PHP
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
2016/03/01 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
element-ui多文件上传的实现示例
2019/04/10 Javascript
vue项目出现页面空白的解决方案
2019/10/31 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
python中update的基本使用方法详解
2019/07/17 Python
python+logging+yaml实现日志分割
2019/07/22 Python
20行Python代码实现一款永久免费PDF编辑工具的实现
2020/08/27 Python
python类共享变量操作
2020/09/03 Python
前台文员岗位职责及工作流程
2013/11/19 职场文书
大学四年学习的自我评价分享
2013/12/09 职场文书
关于祖国的演讲稿
2014/05/04 职场文书
活动总结书
2014/05/08 职场文书
新闻学专业求职信
2014/07/28 职场文书
小学领导班子对照材料
2014/08/23 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
环卫工作汇报材料
2014/10/28 职场文书
2014年学校办公室工作总结
2014/12/19 职场文书
租赁协议书
2015/01/27 职场文书
开会通知短信大全
2015/04/20 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书