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&amp;MYSQL服务器配置说明
Oct 09 PHP
PHP脚本的10个技巧(5)
Oct 09 PHP
php中将地址生成迅雷快车旋风链接的代码[测试通过]
Apr 20 PHP
记录PHP错误日志 display_errors与log_errors的区别
Oct 09 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
Mar 03 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
Apr 08 PHP
php中preg_match的isU代表什么意思
Oct 01 PHP
php代码检查代理ip的有效性
Aug 19 PHP
php 生成签名及验证签名详解
Oct 26 PHP
php实现查询功能(数据访问)
May 23 PHP
PHP简单实现欧拉函数Euler功能示例
Nov 06 PHP
Docker搭建自己的PHP开发环境
Feb 24 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
最省空间的计数器
2006/10/09 PHP
PHP获取163、gmail、126等邮箱联系人地址【已测试2009.10.10】
2009/10/11 PHP
模板引擎正则表达式调试小技巧
2011/07/20 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
JavaScript 乱码问题
2009/08/06 Javascript
js精度溢出解决方案
2012/12/02 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
jQuery 遍历map()方法详解
2016/11/04 Javascript
Vue 全局loading组件实例详解
2018/05/29 Javascript
Angular6使用forRoot() 注册单一实例服务问题
2019/08/27 Javascript
js实现拖拽元素选择和删除
2020/08/25 Javascript
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
selenium+python自动化测试环境搭建步骤
2019/06/03 Python
python实现扫雷小游戏
2020/04/24 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
2019年.net常见面试问题
2012/02/12 面试题
初中生期末考试的自我评价
2013/12/17 职场文书
机械设计毕业生自荐信
2014/02/02 职场文书
高中微机老师自我鉴定
2014/02/16 职场文书
读群众路线心得体会
2014/03/07 职场文书
征婚广告词
2014/03/17 职场文书
市委常委会班子党的群众路线教育实践活动整改方案
2014/10/25 职场文书
2014年保卫工作总结
2014/12/05 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
导游词之青岛崂山
2019/12/27 职场文书
Python pandas之求和运算和非空值个数统计
2021/08/07 Python