WordPress用户登录框密码的隐藏与部分显示技巧

让WordPress登录页的密码框显示最后一个输入的字符
在通常情况下，网页的设计者们会将密码输入框中的所有字符隐藏成黑点，以防止有人在背后偷窥输入的密码，如：

这种密码输入模式虽然减少了被偷窥的危险，但是给我们的密码输入带来了很多麻烦，因为我们不知道到底输入了什么字符，所以经常导致输错密码的情况，浪费了很多时间。

可能你也已经注意到，现在智能手机的很多应用中，使用了这样一种密码框处理方式：对用户在密码框中输入的最后一个字符，会先让它显示2-3秒钟，然后再隐藏，这样可以让用户知道刚刚输入了什么字符，减少了输错的可能性，同时兼具防偷窥功能。如：

今天，我将给大家介绍，在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登录框显示/隐藏输入的密码
这可以让用户知道刚刚输入了什么字符，减少了输错密码的可能性，同时兼具防偷窥功能。

现在，我们还有另外一种选择，直接让用户自行根据需要选择是全部隐藏输入的密码，还是全部显示输入的密码。在全部显示密码框的内容时，用户输错的可能性就大大降低，这也是微软推荐的一种密码框处理方式。效果如下：

全部隐藏密码，点击密码框右边的眼睛图标可以显示密码


全部显示密码，点击密码框右边的锁头图标可以隐藏密码

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支持。

赞 (0)

相关推荐

  • Wordpress 忘记密码的处理方法

    1. Wordpress的密码在存入数据库是以md5码的形式存放 根据此原理可以手动update数据库,重新设置自定的密码 2. 通过执行Mysql语句修改Wordpress密码 使用Phpmyadmin之类的工具, 登录你的数据库管理, 执行如下语句: update wp_uo2kml_users set password=password("新密码") where user='用户名'; 即可更新你的Wordpress密码. 3. 通过PHP文件修改Wordpress密码 新建一个

  • WordPress用户登录框密码的隐藏与部分显示技巧

    WordPress用户登录框密码的隐藏与部分显示技巧

    让WordPress登录页的密码框显示最后一个输入的字符 在通常情况下,网页的设计者们会将密码输入框中的所有字符隐藏成黑点,以防止有人在背后偷窥输入的密码,如: 这种密码输入模式虽然减少了被偷窥的危险,但是给我们的密码输入带来了很多麻烦,因为我们不知道到底输入了什么字符,所以经常导致输错密码的情况,浪费了很多时间. 可能你也已经注意到,现在智能手机的很多应用中,使用了这样一种密码框处理方式:对用户在密码框中输入的最后一个字符,会先让它显示2-3秒钟,然后再隐藏,这样可以让用户知道刚刚输入了什么字

  • jquery.cookie.js实现用户登录保存密码功能的方法

    本文实例讲述了jquery.cookie.js实现用户登录保存密码功能的方法.分享给大家供大家参考,具体如下: 需要导入的js有jquery.js和jquery.cookie.js <script type="text/javascript" src=" jquery-1.5.2.js"></script> <script type="text/javascript" src="jquery.cookie.

  • Android实现用户登录记住密码功能

    Android实现用户登录记住密码功能

    一.打开之前完成的Case_login进行修改再编辑 二.将注册按钮删除并在登录按钮前拖出一个checkBox,编辑代码如下: 在layout_top.xml文件中进行编辑 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_

  • js实现当复选框选择匿名登录时隐藏登录框效果

    js实现当复选框选择匿名登录时隐藏登录框效果

    本文实例讲述了js实现当复选框选择匿名登录时隐藏登录框效果.分享给大家供大家参考.具体如下: 本技巧是比较常见的,有些网站可以登录发帖或匿名发帖,当勾选复选框选择匿名发帖时,登录框自动隐藏了,是不是更人性化了?这其实是在表单元素上稍微加了一点JavaScript代码,具体实现方法请查看代码. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-checkbox-nm-login-submit-codes/ 具体代码如下: <title>当复

  • Android 开发仿简书登录框可删除内容或显示密码框的内容

    Android 开发仿简书登录框可删除内容或显示密码框的内容

    简书App 是我很喜欢的一款软件.今天就模仿了一下他的登录框.先上图: 好了下面上代码,自定义ImgEditText 继承与EditText.重写一些方法. package lyf.myimgedittextdemo; import android.content.Context; import android.graphics.Rect; import android.graphics.drawable.Drawable; import android.text.Editable; impor

  • JS实现登录页密码的显示和隐藏功能

    JS实现登录页密码的显示和隐藏功能

    在登录页经常会用到通过点击文本框的类似小眼睛图片来实现隐藏显示密码的功能,其实实现原理很简单,通过点击事件来改变input的type类型,具体过程看代码: 在没给大家分享实现代码之前,先给大家展示下效果图: <ul class="form-area"> <li> <div class="item-content"> <div class="item-input"> <input type=&q

  • JS实现密码框的显示密码和隐藏密码功能示例

    JS实现密码框的显示密码和隐藏密码功能示例

    本文实例讲述了JS实现密码框的显示密码和隐藏密码功能.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <form method="POST" action="

  • ubuntu 14.04 忘记用户登录密码的图文解决方法

    ubuntu 14.04 忘记用户登录密码的图文解决方法

    1.在VMware Workstatiom中点击"开启此虚拟机",注意,进入系统自启时随即先点击一下屏幕,目的是让鼠标从VM切换到ubuntu启动(否则下面长按shift时可能不会进入GNU GRUN界面): 2.点击屏幕后随即长按shift,系统会进入GUN GRUB界面(对此界面的操作可看界面下面的说明),如图 1所示:如果进入图 2 所示的界面则此步骤的操作失败,不要着急再试一下. 图 1 图 2 3.在GNU GRUB界面中选中ubuntu 高级选项,回车 ,进入图 3所示界面

  • centos7 设置grub密码及单用户登录实例代码

    centos7与centos6在设置grub密码的操作步骤上有很大的差别,特此记录供以后查用 grub加密的目的: 防止不法分子利用单用户模式修改root密码 给grub加密可以采用明文或者加密的密文两种,建议使用加密的密文方式,两者操作步骤上相差不多,本文以加密的密文为例 一.设置grub加密 1.使用grub2-mkpasswd-pbkdf2命令创建密文(一定的保存记住自己设置的密码) 2.在/etc/grub.d/00_header 文件末尾,添加以下内容  (root 为单用户登录使用的

  • Laravel6.2中用于用户登录的新密码确认流程详解

    Laravel6.2中用于用户登录的新密码确认流程详解

    Laravel 昨天发布了 v6.2 版本,它添加了一个新的密码确认功能,该功能使你可以要求已登录的用户重新输入密码,然后才能访问路由. 在你执行敏感操作的时候,这个功能就类似 GitHub 确认对话框.在 Laravel 中你可以轻松的设置它,所以让我们来试用一下新功能,以便你可以更好的了解它的工作原理: 设置 首先,为了更直观的了解这个新功能,我们创建一个新的 Laravel 应用: laravel new confirm-app cd confirm-app composer requir

随机推荐