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 相关文章推荐
改写一个简单的菜单 弹性大小
Dec 02 Javascript
javaScript 计算两个日期的天数相差(示例代码)
Dec 27 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
Jul 06 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
ECMAscript 变量作用域总结概括
Aug 18 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
vue+element的表格实现批量删除功能示例代码
Aug 17 Javascript
详解webpack打包后如何调试的方法步骤
Nov 07 Javascript
详解javascript设计模式三:代理模式
Mar 25 Javascript
解决layer弹出层msg的文字不显示的问题
Sep 11 Javascript
微信小程序轮播图swiper代码详解
Dec 01 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中设置多级目录session的问题
2011/08/08 PHP
PHP模块memcached使用指南
2014/12/08 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
用jquery存取照片的具体实现方法
2013/06/30 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
Bootstrap导航简单实现代码
2017/03/06 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
js实现随机点名程序
2020/09/17 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
如何使用七牛Python SDK写一个同步脚本及使用教程
2015/08/23 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
Python通过属性手段实现只允许调用一次的示例讲解
2018/04/21 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
python实现梯度法 python最速下降法
2020/03/24 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
我的理想演讲稿
2014/04/30 职场文书
合理化建议书
2015/02/04 职场文书
先进个人主要事迹范文
2015/11/04 职场文书
Redis三种集群模式详解
2021/10/05 Redis
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python
MySQL索引失效场景及解决方案
2022/07/23 MySQL