让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
露兜
kaapass@outlook.com  QQ 825533758

业余编程爱好者。

11 条留言

点此留言
  1. 小菜 小菜

    这种打破常规的体验不知道实用性如何

  2. 紫枫网赚 紫枫网赚

    一般情况下,浏览器已经记录了密码了,我很久没输入过了。

  3. godluck

    博主你好,请问你那个下载页面是怎么实现的啊,感觉很炫!

  4. 露兜

    @godluck https://www.ludou.org/file-download-tool.html

  5. petaflops petaflops

    这个方法很不错,赞一个!

  6. 汉克博客

    感觉实用不是性很大

  7. wu先生 wu先生

    手机上输入密码,一般都有这个功能。我觉得这个功能很实用,特别是我这种手指粗的用户。

  8. 蚂蚁

    点击没反应~~

  9. 猫不理

    点击图标的块状样式不对,在 js 中去掉 高度与行高属性即可

  10. SFatpaper

    很不错的功能耶,冒昧的问下,文中提到的php代码是否是放到functions.php文件中么?

  11. 露兜

    @SFatpaper 是的,当前主题的functions.php

发表留言