文本作爲文本框輸入的佔位符？

我注意到，在http://academia.edu/等一些網站上，註冊表單在其文本輸入字段中有一些「佔位符」。這樣在文本框中，沒有標籤，而是在文本框內有一個很小的字體「名字」單詞。文本作爲文本框輸入的佔位符？

當使用Firebug進行調查，我看到了下面的代碼：

<input class="standard_text magic-default magic-default-on" id="user_first_name" name="user[first_name]" size="30" type="text" value="First Name">

它看起來像有一些「神奇」的JavaScript發生在幕後。但是因爲我還不熟悉javascript調試，所以我無法追查他們是如何做到的。

有誰知道如何產生這種效果？

來源

2011-12-02 Hoàng Long

對於現代瀏覽器，您可以使用HTML5 placeholder屬性。

這將實現您在沒有使用任何Javascript後的結果，並且可以在舊版瀏覽器中進行縮放（不會執行任何操作）。

<input placeholder="First Name">

爲了得到這個在舊的瀏覽器工作，就可以包括jQuery的一點點：

$('input:text').focus(function(){ 
    if ($(this).val() === $(this).attr ('placeholder')) { 
     $(this).val(''); 
    } 
}).blur(function(){ 
    if($(this).val() == "") 
    { 
     $(this).val($(this).attr('placeholder')) 
    } 
} 
);

Working Example

來源

2011-12-02 09:32:03

我已經添加了一個if，這樣如果用戶已經輸入了某些東西，代碼將不會重置該值。 –

啊是的，謝謝1月 –

如果在聲明中說明了什麼？更新代碼會很有幫助，以便將來的用戶確切地知道正在討論的內容。 :) – jlg

您必須爲輸入框創建一個「onFocus」事件處理程序，並清除所述輸入框的值。當然，如果它是默認值（在您的示例中爲「First Name」），則只需清除該值，以便稍後返回輸入時不會清除任何用戶輸入的值。

您還可以附加一個「onBlur」事件處理程序，並將輸入框的值恢復爲默認值（如果用戶未輸入任何內容）。

來源

2011-12-02 09:29:57

不好說。這裏的藍圖：http://www.456bereastreet.com/archive/200710/autopopulating_text_input_fields_with_javascript/ – albert

HTML5佔位符是你在找什麼：

http://diveintohtml5.info/forms.html

在你的情況下，它會是：

<input name="firstname" placeholder="First name">

但你也可以用JavaScript 100％做到這一點：

http://lab.dotjay.co.uk/experiments/forms/input-placeholder-text/

來源

2011-12-02 09:35:41 anders

<input id="user_first_name" name="user[first_name]" size="30" type="text" value="First Name" onFocus="inputFocus('First Name', this)" onBlur="inputBlur('First Name', this)"> 
<script type="text/javascriptt"> 
    function inputFocus(ph, el){ 
    if(el.value == ph) 
     el.value = ""; 
    } 
    function inputBlur(ph, el){ 
    if(el.value == "") 
     el.value = ph; 
    } 
</script>

來源

2011-12-02 09:38:44 zuloo

文本作爲文本框輸入的佔位符？

回答

相關問題