JavaScript实现输入框(密码框)出现提示语

 更新时间:2016年01月12日 09:11:23   投稿:mrr  
有时候我们需要在登陆表单有一些提示语言,比如“请输入用户名”和“请输入密码”等语言,通过本文给大家介绍JavaScript实现输入框(密码框)出现提示语的相关知识,对js实现输入框提示相关知识感兴趣的朋友一起学习吧

有时候我们需要在登陆表单有一些提示语言,比如“请输入用户名”和“请输入密码”等语言,至于用户名好说,但是在密码框中出现“请输入密码”这样的语言就有点麻烦了,因为在密码框输入的内容不会以明码显示。如果动态的控制type属性的话就有兼容性问题,如果input已经存在于页面中的话,在IE8和IE8以下浏览器中,type属性是只读的。所以就得想其他办法,代码如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="https://www.jb51.net/" />
<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实现的常用算法,如冒泡、快速、鸽巢、选择、木桶、奇偶等,需要的朋友可以参考下
    2014-04-04
  • 九个超级好用的Javascript技巧

    九个超级好用的Javascript技巧

    在实际的开发工作过程中,积累了一些常见又超级好用的 Javascript 技巧和代码片段,包括整理的其他大神的 JS 使用技巧,今天筛选了 9 个,以供大家参考
    2023-04-04
  • 原生JS实现-星级评分系统的简单实例

    原生JS实现-星级评分系统的简单实例

    下面小编就为大家带来一篇原生JS实现-星级评分系统的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • javascript编写简易计算器

    javascript编写简易计算器

    这篇文章主要为大家详细介绍了javascript编写简易计算器的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • xml 封装与解析(javascript和C#中)

    xml 封装与解析(javascript和C#中)

    xml 封装与解析 javascript和C#中的分别实现代码。
    2009-07-07
  • js canvas实现写字动画效果

    js canvas实现写字动画效果

    这篇文章主要为大家详细介绍了js canvas实现写字动画效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • 二行代码解决全部网页木马

    二行代码解决全部网页木马

    还是挂马问题,这段时间,我渐渐感到压力,头大,通过QQ或MSN加我的人越来越多,我最近自己的工作本来就忙得不亦乐乎。哎,想想,还是要抽空来来帮帮大家。
    2008-03-03
  • JavaScript 弱引用强引用底层示例详解

    JavaScript 弱引用强引用底层示例详解

    这篇文章主要为大家介绍了JavaScript 弱引用强引用底层示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • vue iView 上传组件之手动上传功能

    vue iView 上传组件之手动上传功能

    iView 主要服务于 PC 界面的中后台业务,是一套高质量的开源 UI 组件库。这篇文章主要介绍了iView 上传组件之手动上传功能,需要的朋友可以参考下
    2018-03-03
  • Bootstrap对话框使用实例讲解

    Bootstrap对话框使用实例讲解

    这篇文章主要为大家详细介绍了Bootstrap对话框使用实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09

最新评论