以下是 jQuery隐藏显示密码插件js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html lang="en-US">
<head>
<meta charset="gb2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<title>jQuery������ʾ������</title>
<style>
/*
* Add this if you want to disable IE10's implementation
* of the winking eye in favor of your own.
* Alternatively, you could set the 'innerToggle' option to
* false for that browser only.
*/
::-ms-reveal {
display:none !important;
}
/*
* This toggle style shows a winking "eye-con" (nyuk, nyuk).
* Open eye means "show," closed eye means "hide."
*/
.hideShowPassword-toggle {
background-image: url(img/wink.svg);
background-position: 0 center;
background-repeat: no-repeat;
cursor: pointer;
height: 100%;
overflow: hidden;
text-indent: -9999em;
width: 44px;
}
.hideShowPassword-toggle-hide {
background-position: -44px center;
}
/* Simple text toggle style */
.my-toggle-class {
color: #888;
cursor: pointer;
font-size: 0.75em;
font-weight: bold;
padding: 0.5em 1em;
text-transform: uppercase;
}
/*
* Because our input elements have a z-index so that
* their borders will overlap on focus, we'll give ours
* a higher one to make sure they're always visible.
*/
.hideShowPassword-toggle,
.my-toggle-class {
z-index: 3;
}
/* Some boilerplate styles */
html {
background-color: #f6f6f6;
}
body {
color: #444;
font-family: sans-serif;
line-height: 1.4em;
margin: 1em auto 2em;
padding: 0 1em;
max-width: 30em;
}
h1, p, figcaption {
text-align: center;
}
h1 {
font-size: 1.25em;
line-height: 1em;
margin: 1.5em 0 1em;
padding: 0;
}
figure {
margin: 0 0 1em;
}
figcaption {
color: #999;
font-size: 0.875em;
margin-top: 0.5em;
}
.btn {
background-color: #0088cc;
border-radius: 0.25em;
color: #fff;
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
}
/*
* Styles for the login forms.
* None of this is plugin-dependent.
*/
.login, .login-field {
border-radius: 0.25em;
}
.login {
background-color: #e6e6e6;
}
.login-field {
background-color: #fff;
border: 2px solid #ccc;
border-radius: 0.25em;
color: inherit;
display: block;
font-family: inherit;
font-size: inherit;
line-height: inherit;
margin: 0;
padding: 0.5em;
position: relative;
vertical-align: middle;
width: 100%;
-webkit-appearance: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.login-field:focus {
border-color: #0088cc;
outline: transparent;
z-index: 2;
}
.login-field-username {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
margin-bottom: -2px;
}
.login-field-password {
border-top-left-radius: 0;
border-top-right-radius: 0;
margin-top: -2px;
}
.login-option {
padding: 0.25em 0.5em 0.5em;
}
.login-option input {
vertical-align: baseline;
}
</style>
<!-- Including Modernizr to test for touch support. -->
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<h1>jQuery������ʾ������</h1>
<figure>
<div class="login">
<input class="login-field login-field-username" type="text" placeholder="Username" autocapitalize="off" autocomplete="off" autocorrect="off">
<input class="login-field login-field-password" id="password-1" type="password" placeholder="Password">
</div>
<figcaption>Inner toggle styled as icon.</figcaption>
</figure>
<figure>
<div class="login">
<input class="login-field login-field-username" type="text" placeholder="Username" autocapitalize="off" autocomplete="off" autocorrect="off">
<input class="login-field login-field-password" id="password-2" type="password" placeholder="Password">
</div>
<figcaption>Password visible by default, toggle styled as text and shows on focus.</figcaption>
</figure>
<figure>
<div class="login">
<input class="login-field login-field-username" type="text" placeholder="Username" autocapitalize="off" autocomplete="off" autocorrect="off">
<input class="login-field login-field-password" id="password-3" type="password" placeholder="Password" value="example password">
<div class="login-option"><input type="checkbox" id="show-password"> <label for="show-password">Show password</label></div>
</div>
<figcaption>Checkbox toggles password visibility.</figcaption>
</figure>
<!--
Include Zepto by default or jQuery as a fallback.
The Zepto build here is custom because we need the
data module to be included.
See the README for more info on when to use
Zepto versus jQuery.
-->
<script>
document.write('<script src=js/' +
('__proto__' in {} ? 'zepto.custom' : 'jquery') +
'.js><\/script>')
</script>
<!-- Include the plugin. Yay! -->
<script src="js/hideShowPassword.min.js"></script>
<script>
// Example 1
$('#password-1').hideShowPassword({
// Creates a wrapper and toggle element with minimal styles.
innerToggle: true,
// Makes the toggle functional in touch browsers without
// the element losing focus.
touchSupport: Modernizr.touch
});
// Example 2
$('#password-2').hideShowPassword({
// Make the password visible right away.
show: true,
// Create the toggle goodness.
innerToggle: true,
// Give the toggle a custom class so we can style it
// separately from the previous example.
toggleClass: 'my-toggle-class',
// Don't show the toggle until the input triggers
// the 'focus' event.
hideToggleUntil: 'focus',
// Enable touch support for toggle.
touchSupport: Modernizr.touch
});
// Example 3
$('#show-password').on('change', function () {
// When the '#show-password' checkbox changes its value,
// set the visibility of the password field to whatever
// its 'checked' attribute is.
$('#password-3').hideShowPassword($(this).prop('checked'));
});
</script>
</body>
</html>
JS代码(hideShowPassword.min.js):
!function(factory,global){
if(typeof define==="function"&&define.amd){
define(["jquery"],factory)}
else{
factory(global.jQuery||global.Zepto)}
}
(function($,undef){
var dataKey="plugin_hideShowPassword",defaults={
show:"infer",innerToggle:false,hideToggleUntil:false,touchSupport:false,toggleEvent:"click",toggleTouchEvent:"touchstart mousedown",wrapperClass:"hideShowPassword-wrapper",toggleClass:"hideShowPassword-toggle",states:{
shown:{
inputClass:"hideShowPassword-shown",eventName:"passwordShown",toggleClass:"hideShowPassword-toggle-hide",toggleText:"Hide",attr:{
type:"text",autocapitalize:"off",autocomplete:"off",autocorrect:"off",spellcheck:"false"}
}
,hidden:{
inputClass:"hideShowPassword-hidden",eventName:"passwordHidden",toggleClass:"hideShowPassword-toggle-show",toggleText:"Show",attr:{
type:"password"}
}
}
,widthMethod:$.fn.outerWidth===undef?"width":"outerWidth",heightMethod:$.fn.outerHeight===undef?"height":"outerHeight"}
;
function HideShowPassword(element,options){
this.element=$(element);
this.init(options)}
HideShowPassword.prototype={
init:function(options){
this.update(options,defaults,this.element.prop("type")==="password");
if(this.options.innerToggle){
this.initInnerToggle(this.element,this.options)}
}
,update:function(options,base,toggleFallback){
base=base||this.options;
toggleFallback=toggleFallback||!this.options.show;
if(typeof options!=="object"){
options={
show:options}
}
this.options=$.extend(true,{
}
,base,options);
if(this.options.show==="toggle"){
this.options.show=toggleFallback}
if(this.options.show==="infer"){
this.options.show=this.element.prop("type")!=="password"}
this.ifCurrentOrNot($.proxy(function(state){
$.each(state.attr,$.proxy(function(key,value){
this.element.prop(key,value)}
,this));
this.element.addClass(state.inputClass).trigger(state.eventName)}
,this),$.proxy(function(state){
this.element.removeClass(state.inputClass)}
,this))}
,toggle:function(){
this.update("toggle")}
,currentStateKey:function(){
return this.options.show?"shown":"hidden"}
,ifCurrentOrNot:function(ifCurrent,ifNot){
var currentKey=this.currentStateKey();
$.each(this.options.states,function(thisKey,state){
(currentKey===thisKey?ifCurrent:ifNot)(state)}
)}
,initInnerToggle:function(el,options){
var attachment=el.css("direction")==="rtl"?"left":"right",elWidth=el[options.widthMethod](),wrapperCSS={
position:"relative",display:el.css("display"),verticalAlign:el.css("verticalAlign"),marginTop:el.css("marginTop"),marginRight:el.css("marginRight"),marginBottom:el.css("marginBottom"),marginLeft:el.css("marginLeft")}
,toggleCSS={
position:"absolute",top:"50%",mozUserSelect:"none",webkitUserSelect:"none",msUserSelect:"none",userSelect:"none"}
,elCSS={
marginTop:0,marginRight:0,marginBottom:0,marginLeft:0}
,eventName="",elWidth,wrapper,toggle;
el.wrap($("<div />").addClass(options.wrapperClass).css(wrapperCSS));
wrapper=el.parent();
if(wrapper[options.widthMethod]()!==elWidth){
wrapper.css("width",elWidth)}
toggle=$("<div />").addClass(options.toggleClass);
this.updateInnerToggle(toggle,this.currentStateKey(),options.states);
toggleCSS[attachment]=0;
toggle.css(toggleCSS);
toggle.appendTo(wrapper);
toggle.css("marginTop",toggle[options.heightMethod]()/-2);
elCSS["padding"+attachment.replace(/./,function(m){
return m[0].toUpperCase()}
)]=toggle[options.widthMethod]();
el.css(elCSS);
if(options.touchSupport){
toggle.css("pointerEvents","none");
el.on(options.toggleTouchEvent,$.proxy(function(event){
var toggleX=toggle.offset().left,eventX,lesser,greater;
if(toggleX){
eventX=event.pageX||event.originalEvent.pageX;
if(attachment==="left"){
toggleX+=toggle[options.widthMethod]();
lesser=eventX;
greater=toggleX}
else{
lesser=toggleX;
greater=eventX}
if(greater>=lesser){
event.preventDefault();
this.toggle()}
}
}
,this))}
else{
toggle.on(options.toggleEvent,$.proxy(function(){
this.toggle()}
,this))}
$.each(options.states,function(key,state){
eventName+=state.eventName+" "}
);
el.on(eventName,$.proxy(function(){
this.updateInnerToggle(toggle,this.currentStateKey(),options.states)}
,this));
if(options.hideToggleUntil){
toggle.hide();
el.one(options.hideToggleUntil,function(){
toggle.show()}
)}
}
,updateInnerToggle:function(el,currentKey,states){
this.ifCurrentOrNot(function(state){
el.addClass(state.toggleClass).text(state.toggleText)}
,function(state){
el.removeClass(state.toggleClass)}
)}
}
;
$.fn.hideShowPassword=function(options){
return this.each(function(){
var $this=$(this),data=$this.data(dataKey);
if(data){
data.update(options)}
else{
$this.data(dataKey,new HideShowPassword(this,options))}
}
)}
;
$.each({
show:true,hide:false,toggle:"toggle"}
,function(verb,showVal){
$.fn[verb+"Password"]=function(options){
return this.hideShowPassword($.extend({
}
,options,{
show:showVal}
))}
}
)}
,this);
JS代码(modernizr.custom.js):
/* Modernizr 2.6.2 (Custom Build) | MIT & BSD * Build:http://modernizr.com/download/#-touch-shiv-teststyles-prefixes */
;
window.Modernizr=function(a,b,c){
function v(a){
i.cssText=a}
function w(a,b){
return v(l.join(a+";
")+(b||""))}
function x(a,b){
return typeof a===b}
function y(a,b){
return!!~(""+a).indexOf(b)}
function z(a,b,d){
for(var e in a){
var f=b[a[e]];
if(f!==c)return d===!1?a[e]:x(f,"function")?f.bind(d||b):f}
return!1}
var d="2.6.2",e={
}
,f=b.documentElement,g="modernizr",h=b.createElement(g),i=h.style,j,k={
}
.toString,l=" -webkit- -moz- -o- -ms- ".split(" "),m={
}
,n={
}
,o={
}
,p=[],q=p.slice,r,s=function(a,c,d,e){
var h,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");
if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:g+(d+1),l.appendChild(j);
return h=["­
",'<style id="s',g,'">',a,"</style>"].join(""),l.id=g,(m?l:n).innerHTML+=h,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=f.style.overflow,f.style.overflow="hidden",f.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),f.style.overflow=k),!!i}
,t={
}
.hasOwnProperty,u;
!x(t,"undefined")&&!x(t.call,"undefined")?u=function(a,b){
return t.call(a,b)}
:u=function(a,b){
return b in a&&x(a.constructor.prototype[b],"undefined")}
,Function.prototype.bind||(Function.prototype.bind=function(b){
var c=this;
if(typeof c!="function")throw new TypeError;
var d=q.call(arguments,1),e=function(){
if(this instanceof e){
var a=function(){
}
;
a.prototype=c.prototype;
var f=new a,g=c.apply(f,d.concat(q.call(arguments)));
return Object(g)===g?g:f}
return c.apply(b,d.concat(q.call(arguments)))}
;
return e}
),m.touch=function(){
var c;
return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:s(["@media (",l.join("touch-enabled),("),g,")","{
#modernizr{
top:9px;
position:absolute}
}
"].join(""),function(a){
c=a.offsetTop===9}
),c}
;
for(var A in m)u(m,A)&&(r=A.toLowerCase(),e[r]=m[A](),p.push((e[r]?"":"no-")+r));
return e.addTest=function(a,b){
if(typeof a=="object")for(var d in a)u(a,d)&&e.addTest(d,a[d]);
else{
a=a.toLowerCase();
if(e[a]!==c)return e;
b=typeof b=="function"?b():b,typeof enableClasses!="undefined"&&enableClasses&&(f.className+=" "+(b?"":"no-")+a),e[a]=b}
return e}
,v(""),h=j=null,function(a,b){
function k(a,b){
var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;
return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}
function l(){
var a=r.elements;
return typeof a=="string"?a.split(" "):a}
function m(a){
var b=i[a[g]];
return b||(b={
}
,h++,a[g]=h,i[h]=b),b}
function n(a,c,f){
c||(c=b);
if(j)return c.createElement(a);
f||(f=m(c));
var g;
return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}
function o(a,c){
a||(a=b);
if(j)return a.createDocumentFragment();
c=c||m(a);
var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;
for(;
e<g;
e++)d.createElement(f[e]);
return d}
function p(a,b){
b.cache||(b.cache={
}
,b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){
return r.shivMethods?n(c,a,b):b.createElem(c)}
,a.createDocumentFragment=Function("h,f","return function(){
var n=f.cloneNode(),c=n.createElement;
h.shivMethods&&("+l().join().replace(/\w+/g,function(a){
return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'}
)+");
return n}
")(r,b.frag)}
function q(a){
a||(a=b);
var c=m(a);
return r.shivCSS&&!f&&!c.hasCSS&&(c.hasCSS=!!k(a,"article,aside,figcaption,figure,footer,header,hgroup,nav,section{
display:block}
mark{
background:#FF0;
color:#000}
")),j||p(a,c),a}
var c=a.html5||{
}
,d=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,f,g="_html5shiv",h=0,i={
}
,j;
(function(){
try{
var a=b.createElement("a");
a.innerHTML="<xyz></xyz>",f="hidden"in a,j=a.childNodes.length==1||function(){
b.createElement("a");
var a=b.createDocumentFragment();
return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}
()}
catch(c){
f=!0,j=!0}
}
)();
var r={
elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o}
;
a.html5=r,q(b)}
(this,b),e._version=d,e._prefixes=l,e.testStyles=s,e}
(this,this.document);
分享到QQ
分享到微博
微信扫一扫
