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 相关文章推荐
Linux下进行MYSQL编程时插入中文乱码的解决方案
Mar 15 PHP
PHP生成HTML静态页面实例代码
Aug 31 PHP
防止MySQL注入或HTML表单滥用的PHP程序
Jan 21 PHP
php自动获取目录下的模板的代码
Aug 08 PHP
解析isset与is_null的区别
Aug 09 PHP
Yii入门教程之目录结构、入口文件及路由设置
Nov 25 PHP
php实现httpRequest的方法
Mar 13 PHP
如何使用微信公众平台开发模式实现多客服
Jan 06 PHP
PHP实现linux命令tail -f
Feb 22 PHP
PHP将整数数字转换为罗马数字实例分享
Mar 17 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
Nov 23 PHP
详解php中流行的rpc框架
May 29 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生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
JavaScript OOP面向对象介绍
2010/12/02 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
2011/04/06 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
2013/05/11 Javascript
JavaScript实现类似淘宝的购物车效果
2017/03/16 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
使用D3.js+Vue实现一个简单的柱形图
2018/08/05 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
JavaScript 如何在浏览器中使用摄像头
2020/12/02 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
python多线程threading.Lock锁用法实例
2014/11/01 Python
Python实现的HTTP并发测试完整示例
2020/04/23 Python
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
python实现Excel文件转换为TXT文件
2019/04/28 Python
Python 中使用 PyMySQL模块操作数据库的方法
2019/11/10 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
解决pyPdf和pyPdf2在合并pdf时出现异常的问题
2020/04/03 Python
pycharm如何使用anaconda中的各种包(操作步骤)
2020/07/31 Python
Django中使用Celery的方法步骤
2020/12/07 Python
天猫精选:上天猫,就够了
2016/09/21 全球购物
教师实习自我鉴定
2013/12/13 职场文书
学生会主席就职演讲稿
2014/01/14 职场文书
彩妆大赛策划方案
2014/05/13 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
培训通知书模板
2015/04/17 职场文书
涨价通知
2015/04/23 职场文书
人口与计划生育责任书
2015/05/09 职场文书
教务处教学工作总结
2015/08/10 职场文书
redis哨兵常用命令和监控示例详解
2021/05/27 Redis