HTML字段中的文字在點擊時消失？

我可以輕鬆創建一個已經包含文本的html輸入字段。但是，當用戶點擊輸入字段時，文本不會消失，而是停留在那裏。用戶然後必須手動刪除要鍵入的文本。如何創建一個輸入字段，當用戶單擊輸入字段框時文本消失？HTML字段中的文字在點擊時消失？

2009-10-26 HollerTrain

這樣的事情呢？

<input name="myvalue" type="text" onfocus="if(this.value=='enter value')this.value='';" onblur="if(this.value=='')this.value='enter value';">

這將清除在聚焦於第一次，但隨後會不會對後續重點明確留空當它恢復到給定值的用戶輸入自己的價值，後。

來源

2009-10-26 17:36:57 mecsco

要做到這一點，你可以使用的onfocus這兩個事件和的onblur：

<input type="text" name="theName" value="DefaultValue" 
    onblur="if(this.value==''){ this.value='DefaultValue'; this.style.color='#BBB';}" 
    onfocus="if(this.value=='DefaultValue'){ this.value=''; this.style.color='#000';}" 
    style="color:#BBB;" />

來源

2009-10-26 17:53:11 BitDrink

，以及如果用戶不進入vlue，它會通過空值或defaul值？我的用例也是這樣的，但我希望當用戶不輸入任何東西時，空白值應該分配給我們如何去做？任何建議？並沒有使用placholder屬性 – mahesh 2013-06-28 08:44:26

@mahesh你可以做的是添加一個背景圖片，並在其中寫入你想要的文本，並添加onClick事件偵聽器，這使得圖片不可見。 – 2014-06-03 07:11:19

如果你仍然需要支持IE9，這是一個很棒的解決方案！謝謝！ – 2014-10-20 14:47:50

139

你想要做的就是使用HTML5屬性placeholder它可以讓你的輸入框中設置的默認值是什麼：

<input type="text" name="inputBox" placeholder="enter your text here">

這應該達到你要找的。但是，請小心，因爲Internet Explorer 9和更早版本不支持佔位符屬性。

來源

2011-02-22 11:05:14 Nayish

HTML5通過佔位符屬性爲我們解決了這個問題。無需再次管理事件。好的答案 – Ron 2012-02-17 16:40:52

輸入placeholer屬性不支持在IE9和IE8中...更多請訪問http://caniuse.com – 2013-04-22 03:41:45

有沒有辦法讓佔位符在用戶開始輸入時消失，但是當字段是消失時'專注'。？ – 2015-11-12 18:01:49

試試這個。

<label for="user">user</label> 
<input type="text" name="user" 
onfocus="if(this.value==this.defaultValue)this.value=''"  
onblur="if(this.value=='')this.value=this.defaultValue" 
value="username" maxlength="19" />

希望這有助於。

來源

2012-05-08 13:10:35

以及如果用戶未輸入虛假內容，它會傳遞空白值還是默認值？我的用例也是這樣的，但我希望當用戶不輸入任何東西時，空白值應該分配給我們如何去做？任何建議？並沒有使用placholder屬性 – mahesh 2013-06-28 08:44:45

這是簡單的我認爲應該解決你所有的問題的解決方案：

<input name="myvalue" id="valueText" type="text" value="ENTER VALUE">

這是您的提交按鈕：

<input type="submit" id= "submitBtn" value="Submit">

然後把這個小的jQuery的js文件：

//this will submit only if the value is not default 
$("#submitBtn").click(function() { 
    if ($("#valueText").val() === "ENTER VALUE") 
    { 
     alert("please insert a valid value"); 
     return false; 
    } 
}); 

//this will put default value if the field is empty 
$("#valueText").blur(function() { 
    if(this.value == ''){ 
     this.value = 'ENTER VALUE'; 
    } 
}); 

//this will empty the field is the value is the default one 
$("#valueText").focus(function() { 
    if (this.value == 'ENTER VALUE') { 
     this.value = ''; 
    } 
});

它也適用於舊版瀏覽器。另外，如果你需要，它可以很容易地轉換爲正常的JavaScript。

來源

2013-07-11 08:48:27

感謝它在我們必須支持的IE9上工作。所以我不能使用佔位符的東西。爲了保持文本框中的值設置在一個地方，我使用jQuery來設置文檔框中的值。 $（文件）。就緒（函數（）{ \t/*設定搜索輸入框上的文件負載值*/ \t $（ '＃valueText'）VAL（「ENTER VALUE」）;。 } – atsurti 2014-11-26 00:40:17

就算這樣簡單：<input type="text" name="email" value="e-mail..." onFocus="this.value=''">

來源

2013-09-03 10:27:44

HTML字段中的文字在點擊時消失？

回答

相關問題