WordPress用户登录框密码的隐藏与部分显示技巧


Posted in PHP onDecember 31, 2015

让WordPress登录页的密码框显示最后一个输入的字符
在通常情况下,网页的设计者们会将密码输入框中的所有字符隐藏成黑点,以防止有人在背后偷窥输入的密码,如:

WordPress用户登录框密码的隐藏与部分显示技巧

这种密码输入模式虽然减少了被偷窥的危险,但是给我们的密码输入带来了很多麻烦,因为我们不知道到底输入了什么字符,所以经常导致输错密码的情况,浪费了很多时间。

可能你也已经注意到,现在智能手机的很多应用中,使用了这样一种密码框处理方式:对用户在密码框中输入的最后一个字符,会先让它显示2-3秒钟,然后再隐藏,这样可以让用户知道刚刚输入了什么字符,减少了输错的可能性,同时兼具防偷窥功能。如:

WordPress用户登录框密码的隐藏与部分显示技巧

今天,我将给大家介绍,在WordPress中如何实现这个的功能,步骤非常简单。

1、添加js
点此下载 需要用到的js,将此js文件放到当前使用主题的根目录下。

2、添加php代码
用文本编辑器打开当前主题的functions.php,添加以下php代码:

function ludou_dPassword() {
  wp_enqueue_script( 'dPassword', get_template_directory_uri() . '/jQuery.dPassword.js', array(), '1.0', true );
}
add_action( 'login_enqueue_scripts', 'ludou_dPassword' );

好了,这个功能就添加成功了,就这么简单。

补充说明
1、如果你要将js文件放在当前主题的js目录,那你需要将php代码第2行中的 /jQuery.dPassword.js 改成 /js/jQuery.dPassword.js
2、此功能在输入密码时,只能在最后输入或删除字符,已经被隐藏成黑点的密码中间不能添加或删除字符。

让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支持。

PHP 相关文章推荐
解决phpmyadmin 乱码,支持gb2312和utf-8
Nov 20 PHP
php中取得文件的后缀名?
Feb 20 PHP
分享一下贝贝成长进度的php代码
Sep 14 PHP
浅析PHP Socket技术
Aug 02 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
Jun 26 PHP
PHP中设置一个严格30分钟过期Session面试题的4种答案
Jul 30 PHP
php连接与操作PostgreSQL数据库的方法
Dec 25 PHP
PHP也能干大事之PHP中的编码解码详解
Apr 20 PHP
非常全面的php日期时间运算汇总
Nov 04 PHP
Zend Framework自定义Helper类相关注意事项总结
Mar 14 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
Apr 04 PHP
PHP利用curl发送HTTP请求的实例代码
Jul 09 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
Jul 21 #PHP
WordPress中限制非管理员用户在文章后只能评论一次
Dec 31 #PHP
php实现微信公众号主动推送消息
Dec 31 #PHP
php创建桌面快捷方式实现方法
Dec 31 #PHP
开启PHP的伪静态模式
Dec 31 #PHP
thinkphp多层MVC用法分析
Dec 30 #PHP
thinkphp命名空间用法实例详解
Dec 30 #PHP
You might like
php学习之简单计算器实现代码
2011/06/09 PHP
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
PHP中array_slice函数用法实例详解
2014/11/25 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
javascript offsetX与layerX区别
2010/03/12 Javascript
js的逻辑运算符 ||
2010/05/31 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
2014/04/11 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
《javascript少儿编程》location术语总结
2018/05/27 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
Vue.js实现数据响应的方法
2018/08/13 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
Python简单实现enum功能的方法
2016/04/25 Python
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
关于Python中空格字符串处理的技巧总结
2017/08/10 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
完美解决在oj中Python的循环输入问题
2018/06/25 Python
Sanic框架Cookies操作示例
2018/07/17 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
tensorflow 环境变量设置方式
2020/02/06 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
Python select及selectors模块概念用法详解
2020/06/22 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
北大青鸟学生求职信
2013/09/24 职场文书
初三英语教学反思
2016/02/15 职场文书
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers