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 相关文章推荐
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 Javascript
JS 实现点击a标签的时候让其背景更换
Oct 15 Javascript
js操作table元素实现表格行列新增、删除技巧总结
Nov 18 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
原生JS实现跑马灯效果
Feb 20 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
Feb 27 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
Dec 20 Javascript
详解各版本React路由的跳转的方法
May 10 Javascript
js canvas实现橡皮擦效果
Dec 20 Javascript
微信小程序canvas分享海报功能
Oct 31 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 GD绘制24小时柱状图
2008/06/28 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
Javascript的匿名函数小结
2009/12/31 Javascript
JQuery1.6 使用方法三
2011/11/23 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
多种jQuery绑定事件的实现方式
2016/06/13 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
2016/06/21 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
Node.js Buffer用法解读
2018/05/18 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
Python 爬虫图片简单实现
2017/06/01 Python
Django 连接sql server数据库的方法
2018/06/30 Python
python中的常量和变量代码详解
2018/07/25 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
空指针到底是什么
2012/08/07 面试题
搞笑创意广告语
2014/03/17 职场文书
党员个人整改方案及措施
2014/10/25 职场文书
经验交流材料格式
2014/12/30 职场文书
专家推荐信怎么写
2015/03/25 职场文书
党员心得体会范文2016
2016/01/23 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
部分武汉产收音机展览
2022/04/07 无线电
win10+RTX3050ti+TensorFlow+cudn+cudnn配置深度学习环境的方法
2022/06/25 Servers