2013-02-12 18 views
9

Ich habe zwei beschrifteten:Löschen ein Textfeld auf die Schaltfläche klicken

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

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

Ich möchte eine Schaltfläche namens „Clear“, die beide diese Felder löschen würde.

Mein Wissen weiß ich, dass eine Schaltfläche implementieren ich einen Code verwenden soll:

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

Irgendwelche Hinweise, wie zu implementieren SOMETHING?

Antwort

21

Wie wäre es nur eine einfache Reset-Taste?

<form> 

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

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

</form> 
2

So etwas wird eine Schaltfläche hinzufügen, und lassen Sie es die Werte

<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

Eine einfache JavaScript-Funktion löschen verwenden, um die Arbeit erledigen.

function ClearFields() { 

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

und haben gerade Ihre Taste nennen:

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

Vielen Dank! Ich habe diesen Ansatz verwendet, musste aber einige Verbesserungen vornehmen, anstatt "document.getElementById (" textfield1 "). Value =" ";' Ich habe 'textfield1.value =" ";' – user1415780

9

Wenn Sie es zurücksetzen, dann einfache Bedienung:

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

Aber Vorsicht, es wird nicht Textfelder räumen, die Standard haben value. wenn wir die folgenden Textfelder und standardmäßig, sie haben zum Beispiel die folgenden Werte:

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

So löschen Sie es aus, ein Kompliment es mit javascript:

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

und hängen Sie es an onclick der Reset-Taste:
<input type="reset" value="Reset" onclick="clearText()" />

+1

Für eine bessere Klarheit, Lieber @Lynnell Emmanuel Neri, Würdest du bitte auch oben zwei Zeilen in Antwort einfügen? – Arun

+1

Danke @Arun Ich habe gerade die Antwort bearbeitet, um Ihren Vorschlag zu reflektieren –

Verwandte Themen