WordPress User Login box password hidden and part of the display skills _php skills

Let the wordpress login page Password box display the last entered character
in general, Web page designers hide all characters in the Password entry box into black dots to prevent anyone from peeping behind the password entered, such as:

This type of password input mode reduces the risk of being spied on, but it brings a lot of trouble to our password input, because we don't know exactly what characters we're typing, so it's often a waste of time to lose the wrong password.

You may have noticed, too, now in many applications of smartphones, a cipher box is used: The last character entered in the Password box will let it display for 2-3 seconds, then hide, so that users know what characters have just been entered, reducing the possibility of error, It also has the function of preventing peeping. Such as:

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

1, add JS
Click here to download the JS, this JS file to the current use of the root directory.

2, add PHP code
Open the functions.php of the current topic 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 ');

Well, this feature is added successfully, it is so simple.

Supplementary notes
1, if you want to put the JS file in the current theme of the JS directory, then you need to the PHP code in the 2nd line of the/jquery.dpassword.js change to/js/jquery.dpassword.js
2, this function in the input password, only in the final input or delete characters, has been hidden in the middle of the password black dot can not add or remove characters.

Let the wordpress login box Show/hide the password entered
This allows the user to know what characters have just been entered, reducing the likelihood of a wrong password, and also has a tamper-proof function.

Now, we have another option that allows users to choose whether to hide all the passwords they have entered, or to display the passwords they have entered. When all the contents of the Password box are displayed, the probability of the user losing the error is greatly reduced, which is also recommended by Microsoft as a cryptographic box processing method. The effect is as follows:

Hide all passwords, click the eye icon to the right of the password box to display the password

Display password all, click the lock icon on the right of the password box to hide the password

1, add JS

Click here to download the JS, this JS file to the current use of the root directory.

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>
<?php 
}
add_action (' login_enqueue_scripts ', ' Ludou_prevue ');
? >

All right, that's a great result!

Supplementary notes

1, if you want to put the JS file in the current theme of the JS directory, then you need to the PHP code in the 3rd line of the/jquery.prevue.min.js change to/js/jquery.prevue.min.js
2. This feature requires a 1.9.0 version of jquery support.