js实现input密码框提示信息的方法(附html5实现方法)

本文实例讲述了js实现input密码框提示信息的方法。分享给大家供大家参考，具体如下：

今天我们主管说要在密码框加入个"请输入密码"的提示信息,第一次的时候本来想着用修改input  type 属性的方法呢,结果有某些特别的浏览器不支持,IE的input的type属性是只读的,不能动态设置.所以换其它的方法,实例如下:

<input type="text" onfocus="changeTip(this);" id="passText" name="passText" value="请输入密码"/>
<input style="display: none;" type="password" onblur="changeTip(this);" id="pass" placeholder="" name="pass" value=""/>
<script type="text/javascript">
function changeTip(th){
 var passText = document.getElementById('passText');
 var pass = document.getElementById('pass');
 if(th.id == 'pass'){
  if(th.value == '' || th.value.length == 0 ){
   passText.style.display='';
   pass.style.display='none';
  }
 }else{
  passText.style.display='none';
  pass.style.display='';
  pass.focus();
 }
}
</script>

补充：

其实上面一大段的代码,用html5的一个 placeholder 属性就解决了.代码如下:

代码如下:

<input type="password" id="pass5" placeholder="请输入密码" name="pass5" value=""/>

PS：这里再为大家推荐一款非常好用的JavaScript压缩、格式化与加密工具，功能非常强大（对于想让代码加密的朋友不妨试试这里的js加密功能）：

JavaScript压缩/格式化/加密工具：http://tools.jb51.net/code/jscompress

另外，上面这款js工具中的加密使用的是eval函数加密形式，对此本站还提供了如下这款针对eval函数加密的解密工具，非常强大实用！

js的eval方法在线加密解密工具：http://tools.jb51.net/password/evalencode

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • input输入密码变黑点密文的实现方法

    input输入密码加密 html代码 <form id="login-form" method="post" onsubmit="return checkForm()"> 输入密码<input type="password" id="input-password"> <input type="hidden" id="md5-password&quo

  • 如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标

    从IE 10开始,type="text" 的 input 在用户输入内容后,会自动产生一个小叉叉(X),方便用户点击清除已经输入的文本. 对于type="password"的 input 则会在右方显示一个小眼睛的图标,占击这个图标可以显示已经输入的内容. 好是好,但有时候会画蛇添足,比如已经用js控制了这个功能的时候. 只要使用以下CSS代码可轻松实现隐藏IE浏览器自带的文本删除按钮和密码查看按钮. ::-ms-clear, ::-ms-reveal { disp

  • iOS实现类似微信和支付宝的密码输入框（UIKeyInput协议）

    iOS实现类似微信和支付宝的密码输入框（UIKeyInput协议）

    目前在项目中需要实现发红包的功能,自己就写了一个密码输入框的控件,主要用到了UIKeyInput协议和CoreGraphics框架,效果类似微信支付,感觉还行就把我的思路和制作过程写下来给大家分享一下. 让你的自定义View具备输入的功能(UIKeyInput协议) 通过UIKeyInput协议可以为响应者提供简单的键盘输入的功能,让需要键盘的responder成为第一响应者就行了.UIKeyInput协议必须实现的有三个方法,分别是以下方法: #pragma mark - UIKeyInput

  • js实现input密码框提示信息的方法(附html5实现方法)

    本文实例讲述了js实现input密码框提示信息的方法.分享给大家供大家参考,具体如下: 今天我们主管说要在密码框加入个"请输入密码"的提示信息,第一次的时候本来想着用修改input  type 属性的方法呢,结果有某些特别的浏览器不支持,IE的input的type属性是只读的,不能动态设置.所以换其它的方法,实例如下: <input type="text" onfocus="changeTip(this);" id="passTe

  • js实现input密码框显示/隐藏功能

    js实现input密码框显示/隐藏功能

    JavaScript实现input密码框显示/隐藏的功能,供大家参考,具体内容如下 实现代码: <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .password{ position: relative; width: 280px; height: 60px; } .password,.n-txtCss{ display:

  • jQuery简单实现input文本框内灰色提示文本效果的方法

    本文实例讲述了jQuery简单实现input文本框内灰色提示文本效果的方法.分享给大家供大家参考,具体如下: $(function(){ $(".grayTips").each(function(){ //遍历每个文本框 var objTextBox=$(this); var oldText=$.trim(objTextBox.val()); objTextBox.css("color","#888"); objTextBox.focus(fun

  • JS获取下拉框显示值和判断单选按钮的方法

    本文实例讲述了JS获取下拉框显示值和判断单选按钮的方法.分享给大家供大家参考.具体如下: 1.本人做过很多项目,都需要得到select组件显示的值.下面是我经常用到的方法: Html源码如下: <html><body> <select id="province" name="province" > <option value="1">北京</option> <option valu

  • JS实现下拉框的动态添加(附效果)

    JS实现下拉框的动态添加(附效果)

    效果展示: 页面初加载时:      选择车类型后:      选择车颜色后:     JS实现下拉框的动态添加,网页代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www

  • 控制input输入框中提示信息的显示和隐藏的方法

    在运用html+css+javascrpt进行页面制作时,我们往往会遇到一些影响用户体验,而又容易被我们忽视的小细节.比如,input输入框中的提示信息,怎样才能根据对象获得和失去焦点而实现其显示和隐藏.今天在这里,想跟大家分享一下这个小技巧,希望各位大神不要拍砖哦~~~ 一.要求 input输入框,在光标显示时,隐藏提示信息:光标离开输入框时,显示提示信息. 二.方法 1.给该input取id名,Onfocus="方法名1(this)",onblur="方法名2(this)

  • js中判断文本框是否为空的两种方法

    复制代码 代码如下: //用户名非空验证 function checkUserName(){ var name = document.myform.txtUser; //在这里我认为: name 代表的name 为 txtUser 的文本框 if(name.value.length==0){ alert("请输入用户名"); name.focus(); return false; }else{return true;} } //密码非空验证+确认验证 function checkPas

  • JS获取及设置TextArea或input文本框选择文本位置的方法

    本文实例讲述了JS获取及设置TextArea或input文本框选择文本位置的方法.分享给大家供大家参考.具体实现方法如下: function getPos(el) { var range, textRange, duplicate el.focus() if ( el.selectionStart ) return el.selectionStart else if ( document.selection ) { // IE range = document.selection.createR

  • JS简单获取并修改input文本框内容的方法示例

    JS简单获取并修改input文本框内容的方法示例

    本文实例讲述了JS简单获取并修改input文本框内容的方法.分享给大家供大家参考,具体如下: 一 介绍 获取文本框并修改其内容可以使用getElementById()方法来实现. getElementById()方法可以通过指定的id来获取HTML标记,并将其返回. 语法: sElement=document.getElementById(id) sElement:用来接收该方法返回的一个对象. id:用来设置需要获取HTML标记的id值. 二 应用 获取文本框并修改其内容 在页面加载后的文本框

  • JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果

    本文实例讲述了JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果.分享给大家供大家参考,具体如下: 思路: 1.首先用把密码框用txt暂时替代,并赋上默认值 <input type="text" value="请输入密码" /> 2.当文本框获取焦点后,把默认值清空,把type改为password. 3.当文本框失去焦点后,把type改为txt,把默认值设为"请输入密码". JS代码: window.onload=functi

随机推荐