Tips for hiding and partially displaying the password in the WordPress user login box, wordpress user login_PHP tutorial

Hide and partially display the password in the WordPress user login box, WordPress user login

Let the password box on the WordPress login page display the last entered character
Under normal circumstances, web page designers will hide all characters in the password input box as black dots to prevent someone from peeking at the entered password from behind, such as:

Although this password input mode reduces the risk of being peeped, it brings a lot of trouble to our password input because we don’t know what characters we entered, so we often enter the wrong password and waste a lot of time. time.

Perhaps you have also noticed that many smartphone applications now use such a password box processing method: the last character entered by the user in the password box will be displayed for 2-3 seconds. , and then hide it. This allows the user to know what characters have just been entered, reducing the possibility of incorrect input, and also has an anti-peeping function. Such as:

Today, I will introduce to you how to implement this function in WordPress. The steps are very simple.

1. Add js
Click here to download the js you need, and put this js file in the root directory of the currently used theme.

2. Add php code
Open functions.php of the current theme with a text editor and add the following php code:

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' );

Okay, this function has been added successfully, it’s that simple.

Additional instructions
1. If you want to place the js file in the js directory of the current theme, then you need to change /jQuery.dPassword.js in line 2 of the php code to /js/jQuery.dPassword.js
2. When entering a password with this function, you can only enter or delete characters at the end. Characters cannot be added or deleted in the middle of the password that has been hidden as black dots.

Make the WordPress login box show/hide the entered password
This allows the user to know what characters have just been entered, reducing the possibility of entering the wrong password, while also providing anti-peeping functionality.

Now, we have another option, which directly allows users to choose whether to hide all entered passwords or display all entered passwords according to their needs. When all the contents of the password box are displayed, the possibility of the user making a mistake is greatly reduced. This is also a way of handling password boxes recommended by Microsoft. The effect is as follows:

Hide all passwords. Click the eye icon on the right side of the password box to display the password

Show all passwords. Click the lock icon on the right side of the password box to hide the password

1. Add js

Click here to download the js you need, and put this js file in the root directory of the current theme.

2. Add php code

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>
<&#63;php 
}
add_action( 'login_enqueue_scripts', 'ludou_prevue' );
&#63;>

Okay, great work!

Additional instructions

1. If you want to place the js file in the js directory of the current theme, then you need to change /jquery.prevue.min.js in line 3 of the php code to /js/jquery.prevue.min.js
2. This function requires jQuery support of version 1.9.0 or above.

Articles you may be interested in:

• How to deal with forgotten passwords in WordPress

http://www.bkjia.com/PHPjc/1087278.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/1087278.htmlTechArticleTips for hiding and partially displaying the password in the WordPress user login box. WordPress user login allows the password box on the WordPress login page to display at the end Under normal circumstances, an input character is...