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节点知识
Jan 31 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
Aug 16 Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 Javascript
jquery实现手风琴效果
Nov 20 Javascript
Vue.js组件使用开发实例教程
Nov 01 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 Javascript
angular-cli修改端口号【angular2】
Apr 19 Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 Javascript
Javascript中的解构赋值语法详解
Apr 02 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 批量删除 sql语句
2009/06/05 PHP
解析array splice的移除数组中指定键的值,返回一个新的数组
2013/07/02 PHP
PHP-FPM之Chroot执行环境详解
2015/08/03 PHP
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
2016/12/07 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
加载jQuery后$冲突的解决办法
2010/07/09 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
异步JavaScript编程中的Promise使用方法
2015/07/28 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
JS获得一个对象的所有属性和方法实例
2017/02/21 Javascript
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
谈谈VUE种methods watch和compute的区别和联系
2017/08/01 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
2018/09/27 Javascript
layui的表单提交以及验证和修改弹框的实例
2019/09/09 Javascript
js new Date()实例测试
2019/10/31 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
js实现无缝轮播图
2020/03/09 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
Python调用命令行进度条的方法
2015/05/05 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
法学专业本科生自荐信范文
2013/12/17 职场文书
幼儿园小班评语
2014/04/18 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
2015年秋季运动会加油稿
2015/07/22 职场文书
2016全国“质量月”活动标语口号
2015/12/26 职场文书
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL