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 计划任务 检测用户连接状态
Mar 29 PHP
解析php取整的几种方式
Jun 25 PHP
php使用exec shell命令注入的方法讲解
Nov 12 PHP
php过滤敏感词的示例
Mar 31 PHP
PHP临时文件的安全性分析
Jul 04 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
Jul 18 PHP
php实现过滤表单提交中html标签的方法
Oct 17 PHP
php上传大文件设置方法
Apr 14 PHP
php PDO判断连接是否可用的实现方法
Apr 03 PHP
php提交表单时保留多个空格及换行的文本样式的方法
Jun 20 PHP
laravel 5.4中实现无限级分类的方法示例
Jul 27 PHP
php根据命令行参数生成配置文件详解
Mar 15 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分页示例代码
2007/03/19 PHP
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
供参考的 php 学习提高路线分享
2011/10/23 PHP
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
详谈PHP编码转换问题
2015/07/28 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
js取消单选按钮选中并判断对象是否为空
2013/11/14 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
2015/11/02 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
vue-cli如何快速构建vue项目
2017/04/26 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
详解写好JS条件语句的5条守则
2019/02/28 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
2019/07/12 Javascript
Layui实现主窗口和Iframe层参数传递
2019/11/14 Javascript
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
浅析PEP572: 海象运算符
2019/10/15 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
python遍历路径破解表单的示例
2020/11/21 Python
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
应届生个人求职信模板
2013/11/26 职场文书
养殖行业的创业计划书
2014/01/05 职场文书
学校介绍信范文
2014/01/14 职场文书
企业总经理任命书
2014/06/05 职场文书
素质教育标语
2014/06/27 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
预备党员群众路线教育实践活动思想汇报2014
2014/10/25 职场文书
2014年转正工作总结
2014/11/08 职场文书
见义勇为事迹材料
2014/12/24 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
高并发下Redis如何保持数据一致性(避免读后写)
2022/03/18 Redis
MySQL 数据 data 基本操作
2022/05/04 MySQL