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 相关文章推荐
从零开始 教你如何搭建Discuz!4.1论坛
Jul 07 PHP
ADODB类使用
Nov 25 PHP
简单的过滤字符串中的HTML标记
Dec 25 PHP
php mssql 日期出现中文字符的解决方法
Mar 10 PHP
php xml留言板 xml存储数据的简单例子
Aug 24 PHP
深入PHP操作MongoDB的技术总结
Jun 02 PHP
php获取字段名示例分享
Mar 03 PHP
php获取Google机器人访问足迹的方法
Apr 15 PHP
PHP7正式版测试,性能惊艳!
Dec 08 PHP
分享PHP-pcntl 实现多进程代码
Sep 30 PHP
php数据结构之顺序链表与链式线性表示例
Jan 22 PHP
php使用Swoole实现毫秒级定时任务的方法
Sep 04 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 定界符 使用技巧
2009/06/14 PHP
PHP 用数组降低程序的时间复杂度
2009/12/04 PHP
php中通过Ajax如何实现异步文件上传的代码实例
2011/05/07 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
node.js 一个简单的页面输出实现代码
2012/03/07 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
2016/01/28 Javascript
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
Python获取文件所在目录和文件名的方法
2017/01/12 Python
pygame实现弹力球及其变速效果
2017/07/03 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
Python单元测试实例详解
2018/05/25 Python
Django 登陆验证码和中间件的实现
2018/08/17 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
pytorch数据预处理错误的解决
2020/02/20 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
python实现数字炸弹游戏程序
2020/07/17 Python
python中not、and和or的优先级与详细用法介绍
2020/11/03 Python
python regex库实例用法总结
2021/01/03 Python
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
十岁生日同学答谢词
2014/01/19 职场文书
住宅质量保证书
2014/04/29 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
初婚初育证明范本
2014/11/24 职场文书
党支部书记岗位职责
2015/02/15 职场文书
主持人大赛开场白
2015/05/29 职场文书