jQuery通过改变input的type属性实现密码显示隐藏切换功能
作者:艾莱克JS
大家在做登录注册功能的时候都会遇到用户选择自己输入的密码是否显示需求,大家都是怎么实现的呢?今天小编给大家分享一种比较好用的方法jQuery通过改变input的type属性实现密码显示隐藏切换功能,需要的朋友参考下
一般我们做登录注册的时候都会提供一个让用户选择自己输入的密码是否显示的需求,
这种需求我们肯定会想到只要动态改变input的type属性不就好了(text显示/password隐藏):
于是我用了$(''#id).attr('type', 'password')
这个API 然而结果并不是我想的那样,出错了
HTML 代码
Uncaught Error: type property can't be changed
意思大概就是这个属性不能被修改.
于是我就googl一手.
然而我得到的结果是这样的
HTML 代码
<input id="showPwd" class="txt" type="text" value="密码" tabindex="2" /> <input id="pwd" class="txt" name="password" type="password" /> var showPwd = $("#showPwd"), pwd = $("#pwd"); showPwd.focus(function(){ pwd.show().focus(); showPwd.hide(); }); pwd.blur(function(){ if(pwd.val()=="") { showPwd.show(); pwd.hide(); } });
大体上都是这种办法,简单来说就是用两个input来回切换着显示,互相获取对方输入的字符!
这种办法我试了一手,可以实现,而且代码也不是很多。但是我总觉得怪怪的,这种需求应该这么实现?肯定不可能啊
一般这种情况我都会去看看大厂是不是这么做的,而且某些大厂并不是这么做的!
但是Google都搜不到我的问题,应该是没有解决办法了吧!
以上所述是小编给大家介绍的jQuery通过改变input的type属性实现密码显示隐藏切换功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
- input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
- jquery显示隐藏input对象
- jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
- jQuery 隐藏和显示 input 默认值示例
- jquery form 隐藏的input 选择
- jQuery响应鼠标事件并隐藏与显示input默认值
- jQuery解决input超多的表单提交
- jquery获取form表单input元素值的简单实例
- jQuery获取及设置表单input各种类型值的方法小结
- jquery 动态增加,减少input表单的简单方法(必看)
- jQuery实现提交表单时不提交隐藏div中input的方法