Html 单击按钮时清除文本字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14837466/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Clearing a text field on button click
提问by user1415780
I have two text labels:
我有两个文本标签：
<div>
<input type="text" id="textfield1" size="5"/>
</div>
<div>
<input type="text" id="textfield2" size="5"/>
</div>
I would like to have a button called "Clear" that would erase both these fields.
我想要一个名为“清除”的按钮，可以擦除这两个字段。
To my knowledge, I know that to implement a button I should use a code like this:
据我所知，我知道要实现一个按钮，我应该使用这样的代码：
<div>
<input type="button" value="Clear Fields" onclick=SOMETHING />
</div>
Any clues on how to implement SOMETHING?
关于如何实施的任何线索SOMETHING？
回答by Billy Moat
How about just a simple reset button?
一个简单的重置按钮怎么样？
<form>
<input type="text" id="textfield1" size="5">
<input type="text" id="textfield2" size="5">
<input type="reset" value="Reset">
</form>
回答by surfitscrollit
A simple JavaScript function will do the job.
一个简单的 JavaScript 函数就可以完成这项工作。
function ClearFields() {
document.getElementById("textfield1").value = "";
document.getElementById("textfield2").value = "";
}
And just have your button call it:
只需让您的按钮调用它：
<button type="button" onclick="ClearFields();">Clear</button>
回答by Lynnell Emmanuel Neri
If you want to reset it, then simple use:
如果你想重置它，那么简单的使用：
<input type="reset" value="Reset" />
But beware, it will not clear out textboxes that have default value. For example, if we have the following textboxes and by default, they have the following values:
但请注意，它不会清除具有 default 的文本框value。例如，如果我们有以下文本框，并且默认情况下，它们具有以下值：
<input id="textfield1" type="text" value="sample value 1" />
<input id="textfield2" type="text" value="sample value 2" />
So, to clear it out, compliment it with javascript:
所以，为了清除它，用 javascript 赞美它：
function clearText()
{
document.getElementById('textfield1').value = "";
document.getElementById('textfield2').value = "";
}
And attach it to onclickof the reset button:<input type="reset" value="Reset" onclick="clearText()" />
并将其附加到onclick重置按钮：<input type="reset" value="Reset" onclick="clearText()" />
回答by Offbeatmammal
Something like this will add a button and let you use it to clear the values
像这样的东西会添加一个按钮，让你用它来清除值
<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>
回答by Tanuj Patra
If you are trying to "Submit and Reset" the the "form" with one Button click, Try this!
如果您尝试通过单击一个按钮来“提交和重置”“表单”，试试这个！
Here I have used jQuery function, it can be done by simple JavaScript also...
这里我使用了 jQuery 函数，它也可以通过简单的 JavaScript 来完成......
<form id="form_data">
<input type="anything" name="anything" />
<input type="anything" name="anything" />
<!-- Save and Reset button -->
<button type="button" id="btn_submit">Save</button>
<button type="reset" id="btn_reset" style="display: none;"></button>
</form>
<script type="text/javascript">
$(function(){
$('#btn_submit').click(function(){
// Do what ever you want
$('#btn_reset').click(); // Clicking reset button
});
});
</script>
