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 相关文章推荐
Flash对联广告的关闭按钮讨论
Jan 30 Javascript
JS的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
js通过iframe加载外部网页的实现代码
Apr 05 Javascript
Bootstrap精简教程
Nov 27 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
Apr 07 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
vue裁切预览组件功能的实现步骤
May 04 Javascript
对node.js中render和send的用法详解
May 14 Javascript
基于Vue插入视频的2种方法小结
Apr 02 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 Javascript
Vue 中使用 typescript的方法详解
Feb 17 Javascript
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
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与服务器文件系统的简单交互
2016/10/21 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
Javascript 个人笔记(没有整理,很乱)
2007/07/07 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
React组件生命周期详解
2017/07/03 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
微信小程序如何实现全局重新加载
2019/06/05 Javascript
Node.js系列之发起get/post请求(2)
2019/08/30 Javascript
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python并发编程之线程实例解析
2017/12/27 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
对python中类的继承与方法重写介绍
2019/01/20 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
Css3实现无缝滚动防抖
2020/09/14 HTML / CSS
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
expedia比利时:预订航班+酒店并省钱
2018/07/13 全球购物
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
文化产业实施方案
2014/06/07 职场文书
2014年服务员个人工作总结
2014/12/23 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android