Password hiding and some display skills in the WordPress user logon box, wordpress user logon _ PHP Tutorial

Source: Internet
Author: User
Tags wordpress login wordpress login page
The password of the WordPress user logon box is hidden and displayed. The password of the WordPress user logon box is hidden and displayed in some tips. the wordpress user logon allows the password box on the WordPress logon page to display the last entered character, the password of the WordPress user logon box on the webpage is hidden and some display skills are provided.

Display the last entered character in the password box on the WordPress login page
In general, Web designers hide all the characters in the password input box as black spots to prevent people from spying on the entered password. for example:

Although this password input mode reduces the risk of getting a peek, it brings a lot of trouble to our password input, because we do not know what characters are entered, therefore, it is often a waste of time to lose the wrong password.

You may have noticed that many smart phone applications use a password box to handle the last character entered in the password box, it will display it for 2-3 seconds first, and then hide it. This will allow users to know what characters they just entered, reduce the possibility of incorrect input, and provide the anti-sp feature. For example:

Today, I will introduce you to the simple steps to implement this function in WordPress.

1. add js
Click here to download the required js file and place it in the root directory of the currently used topic.

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

Now, this function is successfully added, which is simple.

Additional instructions
1. if you want to put the js file in the js Directory of the current topic, you need to change/jQuery. dPassword. js in line 2nd of php code to/js/jQuery. dPassword. js.
2. when you enter a password, you can only enter or delete the character at the end. a password that has been hidden as a black dot cannot be added or deleted.


Display/hide the entered password in the WordPress logon box
This allows users to know what characters they have just entered, reduces the possibility of incorrect passwords, and provides anti-sp functionality.

Now, we have another option, which allows users to choose whether to hide all entered passwords or display all entered passwords as needed. When all the content in the password box is displayed, the possibility of user error is greatly reduced, which is also a password box processing method recommended by Microsoft. The effect is as follows:

Hide All Passwords. click the eye icon on the right of the password box to display the passwords.


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

1. add js

Click here to download the required js file and place it in the root directory of the currently used topic.

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

All right, great success!

Additional instructions

1. if you want to put the js file in the js Directory of the current topic, you need to put/jquery in line 3rd of php code. prevue. min. js to/js/jquery. prevue. min. js
2. this function must be supported by jQuery 1.9.0 or later.

Articles you may be interested in:
  • How to deal with Wordpress password forgotten

Login allows the password box on the WordPress login page to display the last entered character...

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.