當輸入字段中沒有文本時，使佔位符文本重新出現

我有一個帶有佔位符屬性的輸入文本字段。當我輸入文字時，佔位符消失，但我希望在單擊按鈕，「清除」或當文本字段爲空時，佔位符文本重新出現。有什麼方法可以實現這一目標？當輸入字段中沒有文本時，使佔位符文本重新出現

以下是我在下面的代碼。我試過

document.text.value = "hello";

但是當我開始輸入時，文本「hello」停留在框中。

HTML

<input type="text" placeholder="hello"> 
<input type="button" value="clear" onclick(clearText)>

的Javascript

function(clearText) { 
document.text.value = " "; 
}

來源

2015-02-05 user2856111

當文本字段爲空，佔位符會自動出現。

當點擊清除按鈕，可以在按鈕上使用onclick屬性，並這樣定義函數：

實現純JS：

<script> 
    function clearText() { 
     // we use getElementById method to select the text input and than change its value to an empty string 
     document.getElementById("my_text").value = ""; 
    }   
</script> 

<!-- we add an id to the text input so we can select it from clearText method --> 
<input id="my_text" type="text" placeholder="hello"> 
<!-- we use onclick attribute to call the clearText method --> 
<input type="button" value="clear" onclick="clearText();">

JSFiddle Demo

或者你可以使用jQuery：

<script> 
    function clearText() { 
     $("#my_text").val(""); 
    }   
</script> 

<input id="my_text" type="text" placeholder="hello"> 
<input type="button" value="clear" onclick="clearText();">

JSFiddle Demo

來源

2015-02-05 02:59:52

謝謝。我喜歡它的簡單性，這與我的接近。問題，爲什麼你必須選擇一個ID？爲什麼它不起作用，如果你只是使用DOM，直到你到達那個元素？ – user2856111

您可以使用DOM，直到您到達該元素，但您需要深入DOM上的所有元素，直到找到該確切的子節點。像document.documentElement.children等等.. –

最簡單的方式做到這一點：

<input placeholder="hello" onchange="if (this.value == '') {this.placeholder = 'hello';}" 
 
/>

來源

2015-02-05 03:01:55 harcos

這是另一種看待它的方式。但我會把JavaScript放在腳本中而不是HTML中。 – user2856111

是的，但你應該看到改變佔位符或改變輸入值（如你所做的）是不同的東西，這個JS可以進入腳本標記以及我剛剛告訴你如何管理問題 – harcos

你非常接近

HTML：

<input type="text" id='theText' placeholder="hello"> 
<input type="button" value="clear" onclick='clearText()'>

的JavaScript：

clearText = function(){ 
document.getElementById('theText').value = ""; 
}

演示：http://jsfiddle.net/trex005/7z957rh2/

來源

2015-02-05 03:03:08 trex005

有多種問題，你的JavaScript語法，從函數聲明開始，以onclick事件規範的結局。但是，你以正確的方式，和下面的代碼做的伎倆：

<input type="text" placeholder="hello"> 
<input type="button" value="clear" onclick="document.querySelector('input').value=''">

但是，如果這是你的文檔中的唯一輸入框它纔有效。爲了使一個以上的輸入工作，你應該給它分配一個ID：

<input type="text" id="text1" placeholder="hello"> 
<input type="button" value="clear" onclick="document.querySelector('#text1').value=''">

，並使用「文本2」等其他領域。

來源

2015-02-05 03:04:14

當輸入字段中沒有文本時，使佔位符文本重新出現

回答

相關問題