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 相关文章推荐
Javascript Cookie读写删除操作的函数
Mar 02 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 Javascript
JavaScript使用cookie记录临时访客信息的方法
Apr 07 Javascript
JavaScript中的bold()方法使用详解
Jun 08 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
JS实现星星评分功能实例代码(两种方法)
Jun 09 Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 Javascript
vue组件详解之使用slot分发内容
Apr 09 Javascript
教你使用vscode 搭建react-native开发环境
Jul 07 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 正则学习实例
2008/07/30 PHP
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
wordpress之js库集合研究介绍
2007/08/17 Javascript
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
2013/01/25 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
2015/12/02 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
使用Object.defineProperty实现简单的js双向绑定
2016/04/15 Javascript
nodejs 实现钉钉ISV接入的加密解密方法
2017/01/16 NodeJs
js 原型对象和原型链理解
2017/02/09 Javascript
Webpack实现按需打包Lodash的几种方法详解
2017/05/08 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
怎样在vue项目下添加ESLint的方法
2019/05/16 Javascript
[04:45]DOTA2上海特级锦标赛主赛事第四日RECAP
2016/03/06 DOTA
python使用心得之获得github代码库列表
2014/06/25 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
python assert的用处示例详解
2019/04/01 Python
Python中print和return的作用及区别解析
2019/05/05 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
JAVA和C++区别都有哪些
2015/03/30 面试题
办公室年终个人自我评价
2013/10/28 职场文书
最新自我评价范文
2013/11/16 职场文书
房地产开发计划书
2014/01/10 职场文书
听课评语大全
2014/04/30 职场文书
社会公德演讲稿
2014/05/20 职场文书
综合办公室岗位职责
2015/04/11 职场文书
病房管理制度范本
2015/08/06 职场文书
vue-element-admin项目导入和导出的实现
2021/05/21 Vue.js
十大最帅动漫男主 碓冰拓海上榜,第一是《灌篮高手》男主角
2022/03/18 日漫
使用CSS实现音波加载效果
2023/05/07 HTML / CSS