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 相关文章推荐
Prototype的Class.create函数解析
Sep 22 Javascript
复选框全选与全不选操作实现思路
Aug 18 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
Jan 10 Javascript
按下回车键指向下一个位置的一个函数代码
Mar 10 Javascript
js实现正方形颜色从下往上升的效果
Aug 04 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
Vue项目中使用Vux的安装过程
May 01 Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
Angular ElementRef简介及其使用
Oct 01 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
Oct 16 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()与foreach()用法区别介绍
2012/09/05 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
2016/06/06 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
React Native中Navigator的使用方法示例
2017/10/13 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
es6 for循环中let和var区别详解
2020/01/12 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
Pyramid添加Middleware的方法实例
2013/11/27 Python
用Python实现协同过滤的教程
2015/04/08 Python
bpython 功能强大的Python shell
2016/02/16 Python
Python tkinter事件高级用法实例
2018/01/31 Python
Django 登陆验证码和中间件的实现
2018/08/17 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
Python中一般处理中文的几种方法
2019/03/06 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
python爬虫如何解决图片验证码
2021/02/14 Python
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
澳大利亚最大的护发和护肤品购物网站:RY
2019/12/26 全球购物
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
七一党建活动方案
2014/01/28 职场文书
小学端午节活动方案
2014/03/13 职场文书
体育教师个人总结
2015/02/09 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
创业计划书之烤红薯
2019/09/26 职场文书
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技