2013-02-12 62 views
9

我有兩個文本標籤:清除按鈕的文本字段點擊

<div>   
    <input type="text" id="textfield1" size="5"/> 
</div> 

<div>   
    <input type="text" id="textfield2" size="5"/>   
</div> 

我想有一個名爲「清除」按鈕,將刪除這些字段。

據我所知,我知道要實現一個按鈕,我應該使用這樣的代碼:

<div>  
    <input type="button" value="Clear Fields" onclick=SOMETHING /> 
</div> 

就如何落實SOMETHING任何線索?

回答

21

怎麼樣只是一個簡單的復位按鈕?

<form> 

    <input type="text" id="textfield1" size="5"> 
    <input type="text" id="textfield2" size="5"> 

    <input type="reset" value="Reset"> 

</form> 
2

像這樣的事情會添加一個按鈕,讓你用它來清除值

<div>   
<input type="text" id="textfield1" size="5"/>   
</div> 

<div>   
<input type="text" id="textfield2" size="5"/>   
</div> 

<div> 
    <input type="button" onclick="clearFields()" value="Clear"> 
</div> 


<script type="text/javascript"> 
function clearFields() { 
    document.getElementById("textfield1").value="" 
    document.getElementById("textfield2").value="" 
} 
</script> 
20

一個簡單的JavaScript函數將做的工作。

function ClearFields() { 

    document.getElementById("textfield1").value = ""; 
    document.getElementById("textfield2").value = ""; 
} 

,只是有你的按鈕調用它:

<button type="button" onclick="ClearFields();">Clear</button> 
+0

謝謝! ,我用這種方法,但必須做一些調整,而不是'document.getElementById(「textfield1」)。value =「」;'我用'textfield1.value =「」;' – user1415780 2013-02-12 19:06:39

9

如果你想重新設置,然後使用簡單:

<input type="reset" value="Reset" /> 

但要注意,也不會清除具有默認value文本框。例如,如果我們有如下的文本框,默認情況下,它們具有以下值:

<input id="textfield1" type="text" value="sample value 1" /> 
<input id="textfield2" type="text" value="sample value 2" /> 

因此,要清除它,使用JavaScript恭維:

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

並將其連接到onclick的復位按鈕:
<input type="reset" value="Reset" onclick="clearText()" />

+1

爲了獲得更好的清晰度,親愛的@Lynnell Emmanuel Neri,請您在答案中包含上面兩行。 – Arun 2017-08-15 07:01:16

+1

謝謝@Arun我剛纔編輯的答案,以反映您的建議 – 2017-08-16 07:47:05