wordpress表单调用_WordPress表单中更好的密码屏蔽

wordpress表单调用

Password masking is a technique used by developers to prevent someone from reading the password on the screen while the user is typing the password. However, password masking ends up causing many problems when it comes to the user experience. In this article, we will outline some of these issues caused by password masking and also some solutions.

密码屏蔽是开发人员用来防止某人在用户键入密码时读取屏幕上密码的一种技术。 但是，密码屏蔽最终会在用户体验方面引起许多问题。 在本文中，我们将概述由密码屏蔽引起的一些问题以及一些解决方案。

In particular, we will focus on the user experience problems relating to password masking on the WordPress admin login and password reset forms. We will also create a WordPress plugin which adds a checkbox to the login and password reset forms to show or hide text in a masked password field.

特别是，我们将重点关注与WordPress管理员登录名和密码重置表单上的密码屏蔽有关的用户体验问题。 我们还将创建一个WordPress插件，该插件在登录名和密码重置表单中添加一个复选框，以显示或隐藏带掩码的密码字段中的文本。

什么是密码屏蔽？ (What Is Password Masking?)

Password masking is a practice of obscuring all the characters of a password field. This is done to prevent someone from reading the password on the screen while the user is typing it.

密码屏蔽是一种使密码字段的所有字符模糊的做法。 这样做是为了防止有人在用户键入密码时读取屏幕上的密码。

Here is how a masked password field looks:

这是被屏蔽的密码字段的外观：

However, in practice this can cause usability problems in many modern computing devices which have either smaller keys for typing or are using touch screens.

但是，在实践中，这可能会在许多现代计算设备中引起可用性问题，这些现代计算设备要么具有用于键入的较小键，要么正在使用触摸屏。

密码屏蔽引起的可用性问题 (Usability Problems Caused by Password Masking)

Users tend to make less typing mistakes on devices which have bigger keys as the fingers fit easier when typing. Users also tend to make more typing mistakes using devices (such as mobile and tablets) which have smaller keys because their fingers don’t fit as well for typing.

用户在具有较大按键的设备上键入错误的可能性较小，因为在键入时手指更容易适应。 用户还倾向于使用按键较小的设备(例如移动设备和平板电脑)犯下更多的打字错误，因为他们的手指不适合打字。

If there is a password field that is masked on the mobile screen and there is no way a user can check what the typed password is (what the user intended to type) then this can lead to the user getting frustrated and leaving your site as there is a chance that the user may type wrong password multiple times unintentionally due to smaller keys.

如果移动屏幕上隐藏了密码字段，并且用户无法检查输入的密码是什么(用户打算键入什么)，那么这可能导致用户感到沮丧并离开您的网站由于密钥较小，用户有可能无意中多次键入错误的密码。

Jakob Nielsen, a web usability consultant who holds a Ph.D. in human–computer interaction, once said:

网络可用性顾问Jakob Nielsen，拥有博士学位。 在人机交互中曾经说过：

Usability suffers when users type in passwords and the only feedback they get is a row of bullets. Typically, masking passwords doesn’t even increase security, but it does cost you business due to login failures.

当用户输入密码并且唯一得到的反馈是一排项目符号时，可用性会受到影响。 通常，屏蔽密码甚至不能提高安全性，但是由于登录失败，这确实使您的业务损失。

Since then developers have begun to rethink this issue and also the potential solutions to address it.

从那时起，开发人员开始重新考虑此问题以及解决该问题的潜在解决方案。

密码屏蔽引起的可用性问题的解决方案 (Solutions for Usability Problems Caused by Password Masking)

There are several solutions proposed by several developers to tackle the usability issue of password masking on mobile phones. Here are some of the popular ones:

一些开发人员提出了几种解决方案，以解决手机上密码屏蔽的可用性问题。 这是一些受欢迎的：

1. Unmasking last character: We can unmask the last character of the password file while the user is typing therefore making it easy for the user to follow by letting them check if they have typed the correct character or not.

   取消隐藏最后一个字符 ：我们可以在用户键入时取消隐藏密码文件的最后一个字符，因此可以让用户检查他们是否输入了正确的字符，从而使用户易于遵循。

2. Unmasking on field focus: We can simply unmask the password when the user moves the cursor on top of the password field. This method is a solution for only devices which have a mouse pointer therefore not a solution for mobile devices.

   在字段焦点上取消屏蔽 ：当用户将光标移到密码字段顶部时，我们可以简单地取消屏蔽密码。 此方法仅适用于具有鼠标指针的设备，因此不适用于移动设备。

3. Unmasking with checkbox: We can also let the users unmask and mask the password field using a checkbox. The previous solution was good but limited to only computers. But this solution works across all devices and is by far the best solution to this problem.

   使用复选框取消屏蔽：我们还可以使用户使用复选框取消屏蔽和屏蔽密码字段。 先前的解决方案很好，但仅限于计算机。 但是，该解决方案可在所有设备上使用，是迄今为止解决此问题的最佳解决方案。

In this tutorial, to make the password masking better on the WordPress login and password reset forms, I will add a checkbox to the forms to hide or show the password.

在本教程中，为了使WordPress登录名和密码重置表单上的密码屏蔽更好，我将在表单中添加一个复选框以隐藏或显示密码。

插件目录和文件 (Plugin Directory and Files)

To start the plugin development, in your wp-content/plugins directory create a directory called password-masking, and then create a file called password-masking.php and another file called password-masking.js inside it.

要开始插件开发，请在wp-content / plugins目录中创建一个名为password-masking的目录，然后在其中创建一个名为password-masking.php的文件和另一个名为password-masking.js的文件。

Out directory structure should look like this

输出目录结构应如下所示

--password-masking
	-password-masking.php
	-password-masking.js

In the password-masking.php file, add the following text to make the plugin installable.

在password-masking.php文件中，添加以下文本以使插件可安装。

< ?php

/**
 * Plugin Name: Password Masking
 * Plugin URI: https://www.sitepoint.com/
 * Description: A plugin to add "show password checkbox" to Login and Password Reset Forms.
 * Author: Narayan Prusty
 */

We need to enqueue the password-masking.js file in login and password reset pages. To enqueue the script file add this code to your password-masking.php file:

我们需要将password-masking.js文件放入登录页面和密码重置页面。 要排队脚本文件，请将以下代码添加到您的password-masking.php文件中：

function pm_enqueue_scripts() 
{
    wp_register_script("pm-js", plugins_url("password-masking/password-masking.js"));
    wp_enqueue_script("pm-js");
}

add_action("login_enqueue_scripts", "pm_enqueue_scripts");

Here we first registered the script using wp_register_script function and then enqueued using wp_enqueue_script.

在这里，我们首先使用wp_register_script函数注册脚本，然后使用wp_enqueue_script入wp_enqueue_script 。

login_enqueue+scripts action hook is used to enqueue scripts and stylesheets to the admin login, registration and password reset pages.

login_enqueue+scripts操作挂钩用于将脚本和样式表排队到管理员登录，注册和密码重置页面。

在登录表单中添加复选框 (Adding a Checkbox to the Login Form)

To add a checkbox to login form we need to use the login_form action hook. This hook is used to customize the built-in WordPress login form by letting us add new fields.

要将复选框添加到登录表单，我们需要使用login_form操作挂钩。 通过允许我们添加新字段，此挂钩用于自定义内置WordPress登录表单。

Place this code in the password-masking.php file to add the checkbox to the login form:

将此代码放在password-masking.php文件中，以将复选框添加到登录表单：

function display_login_checkbox() 
{ 
    ?>
        <p>
            <label for="passwordmask">
                <input name="passwordmask" type="checkbox" id="passwordmask" onclick="passwordMasking_LoginForm()"/> 
                Show Password
            </label>
        </p>    
    < ?php 
}

add_action("login_form", "display_login_checkbox");

Here we added a checkbox with id passwordmask. Clicking on the check invokes the passwordMasking_LoginForm() function.

在这里，我们添加了一个ID为passwordmask的复选框。 单击检查将调用passwordMasking_LoginForm()函数。

Now the login form should look like this:

现在，登录表单应如下所示：

Clicking on the checkbox will not unmask the password field, as we haven’t yet written the JavaScript code for that functionality.

单击复选框不会取消屏蔽密码字段，因为我们尚未为该功能编写JavaScript代码。

在密码重置表单中添加一个复选框 (Adding a Checkbox to the Password Reset Form)

To add the checkbox to password reset form we need to use the resetpass_form action hook. This hook is used to customize the built-in WordPress password reset form by letting us add new fields.

要将复选框添加到密码重置表单中，我们需要使用resetpass_form操作挂钩。 通过允许我们添加新字段，此挂钩用于自定义内置WordPress密码重置表单。

Place this code in the password-masking.php file to add a checkbox to the password reset form:

将此代码放在password-masking.php文件中，以在密码重置表单中添加一个复选框：

function display_password_reset_checkbox() 
{ 
    ?>
        <p>
            <label for="passwordmask">
                <input name="passwordmask" type="checkbox" id="passwordmask" onclick="passwordMasking_ResetForm()"/> 
                Show Password
            </label>
        </p>    
    < ?php 
}

add_action("resetpass_form", "display_password_reset_checkbox");

Here also we added a checkbox with id passwordmask. Clicking on the check invokes the passwordMasking_ResetForm() function.

在这里，我们还添加了一个ID为passwordmask的复选框。 单击检查将调用passwordMasking_ResetForm()函数。

Now the password reset form should look like this:

现在，密码重置表单应如下所示：

But clicking on the checkbox will not unmask the password field as we haven’t yet written JavaScript code for that functionality.

但是，单击复选框不会取消屏蔽密码字段，因为我们尚未为该功能编写JavaScript代码。

取消隐藏登录表单的密码字段 (Unmasking the Password Field of a Login Form)

To unmask the password field of login form when the user clicks on the Show Password checkbox we need to change the type attribute of the password field to text.

要在用户单击“ 显示密码”复选框时取消隐藏登录表单的密码字段，我们需要将密码字段的type属性更改为text 。

Place this code in the password-masking.js file to add this functionality:

将此代码放在password-masking.js文件中以添加此功能：

function passwordMasking_LoginForm()
{
    var checkbox = document.getElementById("passwordmask");

    if(checkbox.checked)
    {
        document.getElementById("user_pass").type = "text";
    }
    else
    {
        document.getElementById("user_pass").type = "password";
    }
}

Here the passwordMasking_LoginForm() is invoked when the user clicks on the checkbox.

当用户单击复选框时，将在此处调用passwordMasking_LoginForm() 。

Here if the password field is not unmasked then we are masking it on checkbox toggle and vice-versa. Here is how the unmasked password field on the login form looks:

在这里，如果未取消屏蔽密码字段，则在复选框切换时将其屏蔽，反之亦然。 这是登录表单上未屏蔽的密码字段的外观：

取消隐藏密码重置表单的密码字段 (Unmasking a Password Field of the Password Reset Form)

To unmask the password fields of password reset form when the user clicks on the Show Password checkbox we need to change the type attribute of the password fields to text.

要在用户单击“ 显示密码”复选框时取消隐藏密码重置表单的密码字段，我们需要将密码字段的type属性更改为text 。

Place this code in the password-masking.js file to add this functionality:

将此代码放在password-masking.js文件中以添加此功能：

function passwordMasking_ResetForm()
{
    var checkbox = document.getElementById("passwordmask");

    if(checkbox.checked)
    {
        document.getElementById("pass1").type = "text";
        document.getElementById("pass2").type = "text";
    }
    else
    {
        document.getElementById("pass1").type = "password";
        document.getElementById("pass2").type = "password";
    }
}

Here the passwordMasking_ResetForm() is invoked when the user clicks on the checkbox.

当用户单击复选框时，将在此处调用passwordMasking_ResetForm() 。

Here if the password field is not unmasked then we are masking it on checkbox toggle and vice-versa. Here is how the unmasked password fields on the password reset form look:

在这里，如果未取消屏蔽密码字段，则在复选框切换时将其屏蔽，反之亦然。 这是密码重置表单上未屏蔽的密码字段的外观：

结论 (Conclusion)

In this article, I’ve shown you how to easily build a plugin to add a Show Password checkbox on the login and password reset forms. We also saw the usability problems of masking password fields and various solutions to this problem.

在本文中，我向您展示了如何轻松构建插件以在登录和密码重置表单上添加“ 显示密码”复选框。 我们还看到了屏蔽密码字段的可用性问题以及对该问题的各种解决方案。

You can now go ahead and use this technique on the WordPress frontend forms on your site.

现在，您可以继续在网站上的WordPress前端表单上使用此技术。

You can get a complete copy of the plugin here. Please let me know what you think in the comments below.

您可以在此处获得该插件的完整副本 。 请在下面的评论中让我知道您的想法。

翻译自: https://www.sitepoint.com/better-password-masking-in-your-wordpress-forms/

wordpress表单调用