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 相关文章推荐
用Socket发送电子邮件(利用需要验证的SMTP服务器)
Oct 09 PHP
PHP实现多条件查询实例代码
Jul 17 PHP
php empty() 检查一个变量是否为空
Nov 10 PHP
简单实现限定phpmyadmin访问ip的方法
Mar 05 PHP
基于php权限分配的实现代码
Apr 28 PHP
探讨各种PHP字符串函数的总结分析
Jun 05 PHP
php安装xdebug/php安装pear/phpunit详解步骤(图)
Dec 22 PHP
PHP中使用addslashes函数转义的安全性原理分析
Nov 03 PHP
php实现将数组转换为XML的方法
Mar 09 PHP
摘自织梦CMS中的图片处理类
Aug 08 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
Dec 14 PHP
TP5框架实现上传多张图片的方法分析
Mar 29 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 stripos()函数及注意事项的分析
2013/06/08 PHP
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
jquery $.ajax入门应用二
2008/11/19 Javascript
js中关于String对象的replace使用详解
2011/05/24 Javascript
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
2018/05/24 jQuery
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
windows下安装python paramiko模块的代码
2013/02/10 Python
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
Python实现通过继承覆盖方法示例
2018/07/02 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
利用python实现对web服务器的目录探测的方法
2019/02/26 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
Django如何使用第三方服务发送电子邮件
2019/08/14 Python
利用python实现平稳时间序列的建模方式
2020/06/03 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
如何通过python计算圆周率PI
2020/11/11 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
优秀士兵个人事迹材料
2014/01/19 职场文书
《满井游记》教学反思
2014/02/26 职场文书
青春演讲稿范文
2014/05/08 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
Golang jwt身份认证
2022/04/20 Golang
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS