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实现浏览器菜单命令
Sep 05 Javascript
js 调整select 位置的函数
Feb 21 Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
Sep 13 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
javascript实现table表格隔行变色的方法
May 13 Javascript
详解vue项目构建与实战
Jun 27 Javascript
Require.js的基本用法详解
Jul 03 Javascript
Javascript实现动态时钟效果
Nov 17 Javascript
记一次用vue做的活动页的方法步骤
Apr 11 Javascript
移动端吸顶fixbar的解决方案详解
Jul 17 Javascript
JavaScript实现留言板案例
Mar 17 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
在线增减.htpasswd内的用户
2006/10/09 PHP
10条PHP编程习惯助你找工作
2008/09/29 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
jQuery Selector选择器小结
2010/05/06 Javascript
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
Javascript中常用类型的格式化方法小结
2016/12/26 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
详解vue2.0脚手架的webpack 配置文件分析
2017/05/27 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
使用TensorFlow实现SVM
2018/09/06 Python
python实现文件的分割与合并
2019/08/29 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
python多进程使用函数封装实例
2020/05/02 Python
Django设置Postgresql的操作
2020/05/14 Python
阿拉伯世界最大的电子卖场:Souq埃及
2016/08/01 全球购物
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
社区反邪教工作方案
2014/06/16 职场文书
个人借款协议书范本
2014/11/17 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android