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

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

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

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:

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. <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHA + expires/expires + bShyc/expires + jrMq1z9bD3MLrtszU3c/Uyr65/bPMoaM8L3A + expires = "brush: java;" >$ (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.