让WordPress登录框显示/隐藏输入的密码
日期:
标签:WordPress教程
如需帮忙改代码,或者WordPress二次开发、PHP网站建设等需求,可联系我购买付费服务: 点此联系我
如果你不想用WordPress后台的登录页,而是想在前台添加登录功能,请移步:WordPress实现前台登录功能
上次我们介绍了:让WordPress登录页的密码框显示最后一个输入的字符,这可以让用户知道刚刚输入了什么字符,减少了输错密码的可能性,同时兼具防偷窥功能。
现在,我们还有另外一种选择,直接让用户自行根据需要选择是全部隐藏输入的密码,还是全部显示输入的密码。在全部显示密码框的内容时,用户输错的可能性就大大降低,这也是微软推荐的一种密码框处理方式。效果如下:
全部隐藏密码,点击密码框右边的眼睛图标可以显示密码
全部显示密码,点击密码框右边的锁头图标可以隐藏密码
今天,我将给大家介绍,在WordPress中如何实现这个的功能,步骤非常简单。
1、添加js
点此下载 需要用到的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">
.prevue-icon-eye:before { content: "\f177"; }
.prevue-icon-eye-off:before { content: "\f160"; }
</style>
<?php
}
add_action( 'login_enqueue_scripts', 'ludou_prevue' );
?>
好了,大功造成!
补充说明
1、如果你要将js文件放在当前主题的js目录,那你需要将php代码第3行中的 /jquery.prevue.min.js
改成 /js/jquery.prevue.min.js
2、此功能需要1.9.0以上版本的jQuery支持。
此功能用到了以下jQuery插件:Prevue.js
-- 完 --
本文采用 「CC BY-NC-SA 4.0」创作共享协议,转载请标注以下信息:
原文出处:露兜即刻 https://www.ludou.org/wordpress-login-form-show-hide-password.html
这种打破常规的体验不知道实用性如何
一般情况下,浏览器已经记录了密码了,我很久没输入过了。
博主你好,请问你那个下载页面是怎么实现的啊,感觉很炫!
@godluck https://www.ludou.org/file-download-tool.html
这个方法很不错,赞一个!
感觉实用不是性很大
手机上输入密码,一般都有这个功能。我觉得这个功能很实用,特别是我这种手指粗的用户。
点击没反应~~
点击图标的块状样式不对,在 js 中去掉 高度与行高属性即可
很不错的功能耶,冒昧的问下,文中提到的php代码是否是放到functions.php文件中么?
@SFatpaper 是的,当前主题的functions.php