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入门的学习方法
Jan 02 PHP
php下获取客户端ip地址的函数
Mar 15 PHP
php去掉字符串的最后一个字符附substr()的用法
Mar 23 PHP
php各种编码集详解和以及在什么情况下进行使用
Sep 11 PHP
php fsockopen中多线程问题的解决办法[翻译]
Nov 09 PHP
php之Smarty模板使用方法示例详解
Jul 08 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
Apr 26 PHP
php实现有趣的人品测试程序实例
Jun 08 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
Dec 25 PHP
php中static和const关键字用法分析
Dec 07 PHP
PHP空值检测函数与方法汇总
Nov 19 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
Apr 20 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 中的一些经验积累
2006/10/09 PHP
php 数组的指针操作实现代码
2011/02/08 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
JavaScript多线程的实现方法
2007/05/08 Javascript
简明json介绍
2008/09/28 Javascript
点击进行复制的JS代码实例
2013/08/23 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
使用jQuery实现简单的tab框实例
2017/08/22 jQuery
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
利用node.js如何创建子进程详解
2017/12/09 Javascript
微信小程序block的使用教程
2018/04/01 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
python3.6环境安装+pip环境配置教程图文详解
2019/06/20 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
2014厂务公开实施方案
2014/02/17 职场文书
房产转让协议书
2014/04/11 职场文书
公司任命书范本
2014/06/04 职场文书
2015年招聘工作总结
2014/12/12 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
教师评职称工作总结2015
2015/04/20 职场文书
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL