JQuery implements a brief display process for the password and implements the input hint Effect, jqueryhint

JQuery implements a brief display process for the password and implements the input hint Effect, jqueryhint

Directory:

I. Purpose

Ii. problem thinking

Iii. Solution

1. Enter the user name

2. Enter the password for brief display

I. Purpose

During the past few days of Project creation, the customer requires a brief display process for the password when entering the password in the text box, such:

Ii. problem thinking

The first solution is to add placeholder in html5, which is similar to the hint attribute in android in the input box. But it is not html5 now. What should I do?

Iii. solution 1. Enter the user name

<Li> <input name = "textfield" type = "text" id = "usern" value = "Enter your userName" class = "input userName inputholder"/> </ li>

Write a JS file:

$.fn.inputholder=function(){    var dval=$(this).val();    $(this).focus(function(){        $(this).val('').addClass('focous');        }).blur(function(){        if($(this).val()==''){            $(this).val(dval).removeClass('focous');            }        });    };var inputholder=$('.inputholder');if(inputholder.length){    inputholder.each(function() {      $(this).inputholder()   })};

When the input box obtains the focus, this value is cleared. when the focus is lost, the previously saved value is sent to the input box.

2. Enter the password for brief display

I found a Js Library: IPass. packed. js.

　　The password input is as follows:

<Li> <input name = "pwdPrompt" type = "text" id = "textfield2" value = "enter your passWord" class = "input passWord inputholder"/> <input name = "pwd" type = "password" id = "password" class = "input passWord hide"/> </li>

Since we set the input type to text for the purpose of display: "Please enter your password", we wrote another input, set its type to password, and hide this input.

In the browser's developer tools, we can see that:

There will be an input with id: password-0, which is automatically generated by IPass. packed. js we introduced.

In my understanding, first, write an input whose type is password. The imported js will automatically generate a new input based on this, and the type of the input is text, the password is displayed. It will be combined with the input whose type is password, which we wrote previously, to implement a brief display of the password.

　　Then we add the following in document. ready:

$(document).ready(function(){    // to enable iPass plugin    $("input[type=password]").iPass();    $("input[name=pwdPrompt]").focus(function () {         $("input[name=pwdPrompt]").hide();         $("input[name=password-0]").show().focus();     });     $("input[name=password-0]").blur(function () {         if ($(this).val() == "") {             $("input[name=pwdPrompt]").show();             $("input[name=password-0]").hide();         }     });    });

　　Note:This must be written in document. ready instead of js.

The display is controlled by hiding and displaying, so as to temporarily display passwords and hide the prompt font.