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 相关文章推荐
一个取得文件扩展名的函数
Oct 09 PHP
用php获取本周,上周,本月,上月,本季度日期的代码
Aug 05 PHP
xml在joomla表单中的应用详解分享
Jul 19 PHP
php获取用户IPv4或IPv6地址的代码
Nov 15 PHP
php判断ip黑名单程序代码实例
Feb 24 PHP
PHP中echo,print_r与var_dump区别分析
Sep 29 PHP
php将12小时制转换成24小时制的方法
Mar 31 PHP
php实现对象克隆的方法
Jun 20 PHP
PHP提取字符串中的手机号正则表达式怎么写
Jul 17 PHP
laravel5.4生成验证码的实例讲解
Aug 05 PHP
PHP从零开始打造自己的MVC框架之类的自动加载实现方法详解
Jun 03 PHP
php和nginx交互实例讲解
Sep 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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
学习ExtJS Window常用方法
2009/10/07 Javascript
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
Extjs 几个方法的讨论
2010/01/28 Javascript
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
2016/03/11 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
JS身份证信息验证正则表达式
2017/06/12 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
微信小程序promsie.all和promise顺序执行
2017/10/27 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
python正则匹配抓取豆瓣电影链接和评论代码分享
2013/12/27 Python
Python中用Decorator来简化元编程的教程
2015/04/13 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
html5开发之viewport使用
2013/10/17 HTML / CSS
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
介绍一下内联、左联、右联
2013/12/31 面试题
大学老师推荐信
2014/02/25 职场文书
交通事故调解协议书
2014/04/16 职场文书
学生通报表扬范文
2015/05/04 职场文书
Redis Stream类型的使用详解
2021/11/11 Redis
Java实现学生管理系统(IO版)
2022/02/24 Java/Android
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技
MySQL 原理优化之Group By的优化技巧
2022/08/14 MySQL