In fact, in fact, the password cannot be displayed in the implementation, but we have such a requirement in our work. When we have not entered something, there is a prompt to enter the password in the box, but when we enter something, the * number is displayed. So how is it implemented? In fact, the principle is very simple, which is to put two text boxes, the style and positioning are the same. First hide the type as password, and only display the pseudo password box with type as text. Set the value prompt for prompts, such as input password. Then when the input is triggered, the input of type text is hidden, so that the input of type password is displayed. Then when the value of password is detected to be empty, then type is password hidden and type is the display of text. I won't say anything, I'll add the code. (ps: Additional reset function)
First enter the html part
<table><tr><td>Account</td><td><input type="text" value="Please enter your account" /></td></tr><tr><td>Password</td><td><input type="text" value="Please enter your password"id="login_showPwd" /><input type="password" id="login_password" style="display: none"/></td></tr><tr><td><input type="button" value="login" /><input type="button" value="reset" id ="btn_res"/></td></tr></table>
Then go to the js part
//Account part $(function(){$(".admin").focus(function(){if($(this).val() == "Please enter your account"){$(this).val("");}});$(".admin").blur(function(){if($(this).val() == ""){$(this).val("Please enter your account");}});//Password part $('#login_showPwd').focus(function(){var text_value=$(this).val();if(text_value == this.defaultValue){$('#login_showPwd').hide();$('#login_password').show().focus();}});$('#login_password').blur(function(){var text_value = $(this).val();if(text_value==""){$('#login_showPwd').show();$('#login_password').hide();}});//Reset the part $('#btn_res').click(function(){$('.admin').val("Please enter your account");$('#login_password').hide().val("");$("#login_showPwd").show();});});Below I will introduce the text method displayed under the password input box
A small prompt is that many websites have two words in the password input box. I used to think it was text, but I only found out today that it is a password tag. The writing method is as follows
<input type="password" name="pas" placeholder="password"/>
Just add a placeholder attribute
The above is the relevant knowledge about the text prompt function code displayed in the password box (password) introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!