因为生活';s太短,不能浪费时间重新输入密码。
Posted
tags:
中文标题:因为生活';s太短,不能浪费时间重新输入密码。 原文标题:Because life's too short to waste time re-typing passwords. 项目评级:Star:732 Fork:112 下载地址:https://github.com/cloudfour/hideShowPassword 详情介绍隐藏显示密码
因为生命太短,不能浪费时间重新输入密码。
受Polar、IE 10+和LinkedIn中出现的模式的启发,并由Luke W记录,hideShowPassword可以让您通过JavaScript或漂亮的嵌入式切换轻松隐藏和显示密码。
该插件适用于任何支持重置<input>
元素的type
属性的浏览器(几乎所有内容都比IE8新)。在不支持的情况下,插件应该优雅地后退。
安装
在包含jQuery之后包含插件:
如果还包括Modernizr,插件的触摸增强功能将默认为Modernizr.touchevents
。
使用npm和Browserify
npm install --save jquery
npm install --save hideshowpassword
使用Bower
bower install hideshowpassword
用法
插件作用于<input>
元素(通常为密码字段):
显示、隐藏和切换
您可以快速显示、隐藏或切换字段内容的可见性:
这些都是hideShowPassword
方法的简写版本:
启用内部切换按钮
内部切换功能往往会为这个插件抢占先机。您可以将其作为hideShowPassword
方法的第二个参数传递:
或者作为任何简写方法的第一个参数:
如果您希望内部切换隐藏到特定事件,则可以将该事件作为字符串传递:
指定更多选项
任何附加选项都可以通过传递一个对象作为任何上述方法的最后一个参数来修改。这是前面的例子,但有一个用于切换的自定义类:
事实上,如果我们愿意,我们可以将所有这些参数作为一个对象传递:
如果您的项目的需求特别独特,那么有许多选项可供选择。
事件
如果需要对密码字段可见性的更改做出响应,可以使用以下任何事件:
选项
以下是所有可用选项及其默认值:
您可以通过操作$.fn.hideShowPassword.defaults
对象来覆盖这些默认值:
已知问题
IE10+(Windows 8)中的竞争控件
InternetExplorer10引入了自己的密码和文本输入字段控件,这些控件有时会与该插件的内部切换功能相竞争。值得庆幸的是,使用CSS可以很容易地覆盖它们:
在IE9+开发工具中调试IE8或更早版本时出错
出于某种原因,除非使用诚实的IE8或更早版本,否则插件在功能测试时会返回假阳性。
切换不可见元素中的怪癖
如果在不可见的元素上使用内部切换功能,它可能没有足够的信息来正确设置包装和切换元素的样式。建议您延迟插件的实例化,直到元素可见为止。
下面是一个使用Bootstrap模式的假设示例:
历史
许可证
根据麻省理工学院许可证发布。
此存储库包含其他库,这些库可能属于或不属于同一许可证范围: