全部隐藏密码，点击密码框右边的眼睛图标可以显示密码
全部显示密码，点击密码框右边的锁头图标可以隐藏密码
今天，我将给大家介绍，在WordPress中如何实现这个的功能，步骤非常简单。
1、添加js
prevue.zip 需要用到的js，将此js文件放到当前使用主题的根目录下(可以百度搜索下载)。
2、添加php代码
| 代码如下 | 复制代码 |
|
function ludou_prevue() { wp_enqueue_script("jquery"); wp_enqueue_script( 'prevue', get_template_directory_uri() . '/jquery.prevue.min.js', array(), '1.0', true ); ?> <style type="text/css"> |
|
好了，大功造成！
补充说明
1、如果你要将js文件放在当前主题的js目录，那你需要将php代码第3行中的 /jquery.prevue.min.js 改成 /js/jquery.prevue.min.js
2、此功能需要1.9.0以上版本的jQuery支持。
jquery.prevue.min.js 代码如下
| 代码如下 | 复制代码 |
|
(function($){window.log=function(){log.history=log.history||[];log.history.push(arguments);if(this.console){console.log(Array.prototype.slice.call(arguments))}};$.fn.prevue=function(settings){var defaults={fontIconClassNameOff:'prevue-icon-eye',fontIconClassNameOn:'prevue-icon-eye-off',fontSize:'16',color:'#999',offsetX:12,offsetY:0};if(settings){$.extend(defaults,settings)} return this.each(function(){var $o=$(this);var node=this.nodeName.toLowerCase();if(node=="input"&&this.type=="password"){var $input=$o,$previewIcon=$('<i>').css({'font-size':defaults.fontSize+'px'}).addClass('dashicons-before').addClass(defaults.fontIconClassNameOff),paddingTop=$o.css('padding-top'),paddingBottom=$o.css('padding-bottom'),height=parseInt($o.height())+parseInt(paddingTop.substring(0,paddingTop.length-2))+parseInt(paddingBottom.substring(0,paddingBottom.length-2)),$previewBtn=$('<a>').attr('href','javascript: void(0);').addClass('prevue-btn').css({'text-decoration':'none','position':'absolute','right':parseInt(0+defaults.offsetX)+'px','top': '-7px','height':parseInt(height+defaults.offsetY)+'px','line-height':(height+defaults.offsetY)+'px','color':defaults.color}),$wrapper=$('<span>').addClass('prevue-wrapper').css({'position':'relative'});$previewBtn.append($previewIcon);$o.replaceWith($wrapper);$wrapper.append($input);$wrapper.append($previewBtn);$previewBtn.on('click',function(e){var $el=$(this).prev(),$icon=$(this).children().eq(0);if($el.attr('type')=='password'){$el.attr('type','text');$icon.removeClass(defaults.fontIconClassNameOff).addClass(defaults.fontIconClassNameOn);} else{$el.attr('type','password');$icon.removeClass(defaults.fontIconClassNameOn).addClass(defaults.fontIconClassNameOff);}});}else{console.log('Prevue.js only works on <input type="password"> elements, while you have used it on a <'+node+'> element.');return false;}});};$('input[type=password]').prevue();})(jQuery); |
|
时间： 2024-10-06 19:57:12