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 相关文章推荐
用PHP和ACCESS写聊天室(十)
Oct 09 PHP
php日历[测试通过]
Mar 27 PHP
php 运行效率总结(提示程序速度)
Nov 26 PHP
PHP获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
Jun 18 PHP
PHP错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
May 04 PHP
php返回相对时间(如:20分钟前,3天前)的方法
Apr 14 PHP
PHP中COOKIES使用示例
Jul 26 PHP
Yii中CGridView实现批量删除的方法
Dec 28 PHP
THinkPHP获取客户端IP与IP地址查询的方法
Nov 14 PHP
PHP实现的mongoDB数据库操作类完整实例
Apr 10 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
Feb 14 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
May 23 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学习之PHP表达式
2006/10/09 PHP
php生成WAP页面
2006/10/09 PHP
ajax取消挂起请求的处理方法
2013/03/18 PHP
PHP的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
List Installed Software Features
2007/06/11 Javascript
javascript显示选择目录对话框的代码
2008/11/10 Javascript
IE和Firefox下javascript的兼容写法小结
2008/12/10 Javascript
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
JavaScript 面向对象的 私有成员和公开成员
2010/05/13 Javascript
jquery 关于event.target使用的几点说明介绍
2013/04/26 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
js写的评论分页(还不错)
2013/12/23 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
下载糗事百科的内容_python版
2008/12/07 Python
十个Python程序员易犯的错误
2015/12/15 Python
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
python 循环遍历字典元素的简单方法
2016/09/11 Python
Python 通过pip安装Django详细介绍
2017/04/28 Python
Python中支持向量机SVM的使用方法详解
2017/12/26 Python
Python中按键来获取指定的值
2019/03/02 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
FFT快速傅里叶变换的python实现过程解析
2019/10/21 Python
使用PyTorch实现MNIST手写体识别代码
2020/01/18 Python
keras的ImageDataGenerator和flow()的用法说明
2020/07/03 Python
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
就业意向书范文
2014/04/01 职场文书
优秀团员个人总结
2015/02/26 职场文书
深入理解go slice结构
2021/09/15 Golang
德劲DE1105机评
2022/04/05 无线电
基于Python实现射击小游戏的制作
2022/04/06 Python