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怎样调用MSSQL的存储过程
Oct 09 PHP
php访问查询mysql数据的三种方法
Oct 09 PHP
用PHP实现多级树型菜单
Oct 09 PHP
php array_search() 函数使用
Apr 13 PHP
PHP使用内置dir类实现目录遍历删除
Mar 31 PHP
PHP的APC模块实现上传进度条
Oct 27 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
Feb 15 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
Nov 06 PHP
THINKPHP3.2使用soap连接webservice的解决方法
Dec 13 PHP
PHP的PDO预定义常量讲解
Jan 24 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
Jun 14 PHP
php使用pecl方式安装扩展操作示例
Aug 12 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中Session和Cookie是如何操作的
2015/10/10 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
PHP中类的自动加载的方法
2017/03/17 PHP
PHP7多线程搭建教程
2017/04/21 PHP
JQuery 文本框使用小结
2010/05/22 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
莱鸟介绍window.print()方法
2016/01/06 Javascript
详解Webwork中Action 调用的方法
2016/02/02 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
写一个Vue Popup组件
2019/02/25 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
使用python为mysql实现restful接口
2018/01/05 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
用python脚本24小时刷浏览器的访问量方法
2018/12/07 Python
在python 中实现运行多条shell命令
2019/01/07 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
Python中使用双下划线防止类属性被覆盖问题
2019/06/27 Python
python保留小数位的三种实现方法
2020/01/07 Python
Tensorflow 定义变量,函数,数值计算等名字的更新方式
2020/02/10 Python
python利用文件时间批量重命名照片和视频
2021/02/09 Python
德国网上宠物店:Zoobio
2018/05/23 全球购物
DJI全球:DJI Global
2021/03/15 全球购物
会计专业毕业生推荐信
2013/11/05 职场文书
大专应届生个人的自我评价
2013/11/21 职场文书
应用数学自荐书范文
2013/11/24 职场文书
党校培训自我鉴定
2014/02/01 职场文书
四风存在的原因分析
2014/02/11 职场文书
新任教师自我鉴定
2014/02/24 职场文书
志愿者服务感言
2014/02/27 职场文书
班级文化标语
2014/06/23 职场文书
2015大学生求职信范文
2015/03/20 职场文书
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript