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中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
jquery+css实现动感的图片切换效果
Nov 25 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
Sep 14 Javascript
原生JS实现日历组件的示例代码
Sep 22 Javascript
React如何避免重渲染
Apr 10 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 Javascript
微信小程序实现日期格式化和倒计时
Nov 01 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
面试中canvas绘制图片模糊图片问题处理
Mar 13 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
我的论坛源代码(十)
2006/10/09 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
jquery下实现overlay遮罩层代码
2010/08/25 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
Kotlin学习第一步 kotlin语法特性
2017/05/25 Javascript
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
angular json对象push到数组中的方法
2018/02/27 Javascript
LayUI表格批量删除方法
2018/08/15 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
layui实现三级导航菜单
2019/07/26 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
python中元组的用法整理
2020/06/15 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
业务经理的岗位职责
2013/11/16 职场文书
优秀党支部事迹材料
2014/01/14 职场文书
《中国的气候》教学反思
2014/02/23 职场文书
yy司仪主持词
2014/03/22 职场文书
创业女性典型材料
2014/05/02 职场文书
第二课堂活动总结
2014/05/07 职场文书
企业法人代表证明书
2014/09/27 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
少儿励志名言(80句)
2019/08/14 职场文书