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 实现多服务器共享 SESSION 数据
Aug 15 PHP
php session和cookie使用说明
Apr 07 PHP
PHP Session 变量的使用方法详解与实例代码
Sep 11 PHP
PHPThumb图片处理实例
May 03 PHP
php中使用url传递数组的方法
Feb 11 PHP
PHP限制HTML内容中图片必须是本站的方法
Jun 16 PHP
PHP基于工厂模式实现的计算器实例
Jul 16 PHP
利用 fsockopen() 函数开放端口扫描器的实例
Aug 19 PHP
PHP实现将base64编码字符串转换成图片示例
Jun 22 PHP
PDO::beginTransaction讲解
Jan 27 PHP
Laravel实现ApiToken认证请求
Oct 14 PHP
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
Apr 01 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 mysql Errcode: 28 终极解决方法
2009/07/01 PHP
PHP开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
PHP中执行cmd命令的方法
2014/10/11 PHP
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
PHP数据分析引擎计算余弦相似度算法示例
2017/08/08 PHP
getComputedStyle与currentStyle获取样式(style/class)
2013/03/19 Javascript
js 加密压缩出现bug解决方案
2014/11/25 Javascript
JavaScript判断表单为空及获取焦点的方法
2016/02/12 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
微信小程序checkbox组件使用详解
2018/01/31 Javascript
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
小程序实现分类页
2019/07/12 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
Python画图学习入门教程
2016/07/01 Python
python版微信跳一跳游戏辅助
2018/01/11 Python
Python os.access()用法实例
2019/02/18 Python
详解python中docx库的安装过程
2019/11/08 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
使用CSS3来绘制一个月食图案
2015/07/18 HTML / CSS
维多利亚的秘密官方网站:Victoria’s Secret
2018/10/24 全球购物
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
班级活动策划书
2014/02/06 职场文书
和谐社区口号
2014/06/19 职场文书
2014年教育工作总结
2014/11/26 职场文书
病人慰问信范文
2015/02/15 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
2019森林防火宣传标语大全!
2019/07/03 职场文书
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers