直到用戶開始輸入時，在輸入中顯示文本「用戶名」和「密碼」

Question

我正在使用PHP來顯示我在窗體中的日誌。現在，表單顯示「用戶名」，但用戶開始輸入時文本不會消失。當用戶開始輸入時，如何讓文本消失，以便文本「用戶名」不會與輸入的任何內容重疊？

這裏是我的「用戶名」代碼

<p class="infield grouptop"> 
     <input type="text" name="user" id="user" placeholder="" 
       value="<?php p($_['username']); ?>"<?php p($_['user_autofocus'] ? ' autofocus' : ''); ?> 
       autocomplete="on" required/> 
     <label for="user" class="infield"><?php p($l->t('Username')); ?></label> 
     <img class="svg" src="<?php print_unescaped(image_path('', 'actions/user.svg')); ?>" alt=""/> 
</p> 

這裏是我的「密碼」代碼

<p class="infield groupbottom"> 
     <input type="password" name="password" id="password" value="" placeholder="" 
       required<?php p($_['user_autofocus'] ? '' : ' autofocus'); ?> /> 
     <label for="password" class="infield"><?php p($l->t('Password')); ?></label> 
     <img class="svg" id="password-icon" src="<?php print_unescaped(image_path('', 'actions/password.svg')); ?>" alt=""/> 
</p> 

我想實現密碼錶單同樣的事情。

Answer 1

<input type="password" placeholder="enter the password" onClick="this.value='';"> 

或

<input type="password" placeholder="enter the password" onClick="this.select();"> 

，如果它已經有一定的價值，你可以刪除它也ONCLICK或選擇它，當你開始輸入

Answer 2

您正在尋找html佔位符。

http://www.w3schools.com/tags/att_input_placeholder.asp

<form action="demo_form.asp"> 
    <input type="text" name="fname" placeholder="First name"><br> 
    <input type="text" name="lname" placeholder="Last name"><br> 
    <input type="submit" value="Submit"> 
</form> 

Answer 3

使用自動替換最新瀏覽器的佔位符

<input type="password" placeholder="Your Text" onClick="this.value='';" > 

對於以前的瀏覽器，你可以使用jQuery，你可以這樣做。從這個網站Placeholder with Jquery

$('[placeholder]').parents('form').submit(function() { 
    $(this).find('[placeholder]').each(function() { 
    var input = $(this); 
    if (input.val() == input.attr('placeholder')) { 
     input.val(''); 
    } 
    }) 
});