• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > jQuery通过改变input的type属性实现密码显示隐藏切换功能

jQuery通过改变input的type属性实现密码显示隐藏切换功能

作者:艾莱克JS 字体:[增加 减小] 来源:互联网 时间:2017-05-11

艾莱克JS通过本文主要向大家介绍了jquery input type,jquery设置input属性,jquery获取input的值,jquery给input赋值,jquery input赋值等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

一般我们做登录注册的时候都会提供一个让用户选择自己输入的密码是否显示的需求,

这种需求我们肯定会想到只要动态改变input的type属性不就好了(text显示/password隐藏):

于是我用了$(''#id).attr('type', 'password')这个API 然而结果并不是我想的那样,出错了

HTML 代码

Uncaught Error: type property can't be changed
</div>

意思大概就是这个属性不能被修改.

于是我就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(); 
  } 
}); 
</div>

大体上都是这种办法,简单来说就是用两个input来回切换着显示,互相获取对方输入的字符!

这种办法我试了一手,可以实现,而且代码也不是很多。但是我总觉得怪怪的,这种需求应该这么实现?肯定不可能啊

一般这种情况我都会去看看大厂是不是这么做的,而且某些大厂并不是这么做的!

但是Google都搜不到我的问题,应该是没有解决办法了吧!

以上所述是小编给大家介绍的jQuery通过改变input的type属性实现密码显示隐藏切换功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • jQuery通过改变input的type属性实现密码显示隐藏切换功能

相关文章

  • 2017-05-11Bootstrap 填充Json数据的实例代码
  • 2017-05-11无循环 JavaScript(map、reduce、filter和find)
  • 2017-05-11js监听input输入框值的实时变化实例
  • 2017-05-11AngularJS执行流程详解
  • 2017-05-11AngularJS ui-router (嵌套路由)实例
  • 2017-05-11快速掌握jQuery插件开发
  • 2017-09-27Javascript 面向对象编程(一):封装
  • 2017-05-11PHP实现本地图片上传和验证功能
  • 2017-05-11jquery中绑定事件的异同
  • 2017-05-11js实现随机抽选效果、随机抽选红色球效果

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • Jquery-data的三种用法
    • div实现自适应高度的textarea实现angular双向绑定
    • JavaScript实现图像模糊化的方法实例
    • 微信小程序商城项目之购物数量加减(3)
    • js自制图片放大镜功能
    • 基于jQuery实现选项卡效果
    • openLayer4动态改变标注图标
    • 理解javascript中的Function.prototype.bind的方法
    • Angular.js中定时器循环的3种方法总结
    • 新闻上下滚动jquery 超简洁(必看篇)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有