JQuery实现密码有短暂的显示过程和实现...
来源:互联网 发布:温什么知什么的成语 编辑:程序博客网 时间:2024/05/21 10:19
这几天做项目的时候,客户要求在文本框输入密码的时候,要求密码有短暂的显示过程,如下图:
问题思考
首先解决的是如何在input框里实现类似于android中hint属性,html5中添加placeholder,但是现在不是html5,怎么办?
解决办法
以输入用户名为例:
<li>
<input name="textfield" type="text" id="usern" value="请输入您的用户名" class="input userName inputholder" />
</li>
写一个JS
$.fn.inputholder=function(){
var dval=$(this).val();
$(this).focus(function(){
$(this).val("").addClass("focous");
}).blur(function(){
if($(this).val()==""){
$(this).val(dval).removeClass("focous");
}
});
};
var inputholder=$(".inputholder");
if(inputholder.length){
inputholder.each(function() {
$(this).inputholder()
})
};
当输入框获得焦点的时候,将这个值清空,当丢失焦点的时候,再将之前已经存好的值付给输入框。
下面解决密码输入时有短暂的显示效果:
从网上找到了一个Js库: IPass.packed.js
密码的input如下:
<li>
<input name="pwdPrompt" type="text" id="textfield2" value="请输入您的密码" class="input passWord inputholder"/>
<input name="pwd" type="password" id="password" class="input passWord hide" />
</li>
由于我们之前为了显示:”请输入您的密码” 将input的type设为text 所以我们又写了一个input,将其type设为password 并且将这个input隐藏。
在浏览器的开发人员工具中我们可以看到:
会存在一个id为password—0的input,这个就是我们引入的IPass.packed.js自动生成的。
在我的理解看来,先是写一个type为password的input,导入的js会在这个的基础上自动生成一个新的input,这个input是的type为text,可以显示密码。
与我们之前写好的type为password的input将结合,实现密码短暂显示过程。
然后我们在document.ready里加入:
$(document).ready(function(){
// to enable iPass plugin
$("input[type=password]").iPass();
$("input[name=pwdPrompt]").focus(function () {
$("input[name=pwdPrompt]").hide();
$("input[name=password-0]").show().focus();
});
$("input[name=password-0]").blur(function () {
if ($(this).val() == "") {
$("input[name=pwdPrompt]").show();
$("input[name=password-0]").hide();
}
});
});
注意:这个必须写在document.ready 里,而不是写在js里。
主要还是通过隐藏和显示来控制显示,从而达到密码短暂显示和提示字体隐藏的功能。
- JQuery实现密码有短暂的显示过程和实现...
- JQuery实现密码有短暂的显示过程和实现 input hint效果
- JQuery实现密码有短暂的显示过程和实现 input hint效果
- JQuery实现密码有短暂的显示过程和实现 input hint效果
- JQuery实现密码的显示与隐藏
- jquery实现显示密码框中的密码
- android 实现密码的显示和隐藏
- jquery 实现密码框的显示隐藏 js
- js实现显示密码和隐藏密码
- Android 实现显示密码和隐藏密码
- jQuery实现菜单的隐藏和显示
- Jquery实现图片的显示和隐藏
- js、jquery分别实现点击密码输入框密码显示和隐藏
- 一次短暂arp欺骗的简单实现
- iOS 键盘初始化的过程有短暂延迟
- jquery实现显示和隐藏
- JQuery记住用户名和密码的具体实现
- JQuery记住用户名和密码的具体实现
- 后缀数组入门 SPOJ694
- Java实现一个GUI的SEO软文生成器v1
- HDU 5777 domino
- Object函数说明
- Python 03:Python字符串
- JQuery实现密码有短暂的显示过程和实现...
- Mysql 建表用 MyISAM不用InnoDB(大数据高读取)
- CSS-轮廓(outline)
- Loop(38)
- Java对象初始化
- 顺心随笔NO.1
- MYSQL 浅谈MyISAM 存储引擎
- 关于Cool Compiler
- Android分发机制深入解析