在表单中重置输入和输出文本区域

Posted

技术标签:

【中文标题】在表单中重置输入和输出文本区域【英文标题】:Reset input & output textarea in a form 【发布时间】:2021-08-05 23:25:19 【问题描述】:

在简单的 html/js(没有 jquery)中,我必须重置表单中包含的所有文本区域。以下是我的尝试:

<form id="myForm" action="#">

  Source:<br><br>

  <textarea id="tab_source" name="source" rows=6>
original default text
</textarea><br><br> Result:

  <br><br>

  <textarea id="tab_result" name="result" rows=6>
</textarea><br><br>

  <input name="button" type="button" value="GO!" onclick="transform()">
  <input name="reset" type="reset" value="Reset test 1">
  <input type="button" onclick="document.getElementById(" myForm ").reset();" value="Reset test 2">
  <input type="button" onclick="document.getElementById(" tab_source ").reset();" value="Reset test 3">
  <input type="button" onclick="document.getElementById(" myForm ").value=''" value="Reset test 4">
  <input type="button" onclick="document.getElementById(" tab_source ").value=''" value="Reset test 5">

</form>

“重置测试 1”按钮仅重置最后一个文本区域(“tab_result”)。 其他按钮根本不起作用。 你能帮助我吗?谢谢!

【问题讨论】:

出于这个原因,在 HTML 中编写 javascript 并不是一个好主意。您应该会收到无效语法的错误,但 HTML 会优雅地忽略它们并继续做它的事情。将您的 JavaScript 保存在 .js 文件中或内联在 &lt;script&gt; 标记中。尽管您的第一个按钮按预期工作。它将两个文本区域都返回到它们的原始状态。 【参考方案1】:

问题是,您在输入属性结束时使用:“

为了向您展示它,它看起来像这样:

<input attribute="bla" attribute="bla" onClick="document.getElementById(" <!-- <- quotes determine end of onClick attribute.-->

试试:

<input type="button" onclick="document.getElementById('myForm').reset();" value="Reset test 2">
  <input type="button" onclick="document.getElementById('tab_source').reset();" value="Reset test 3">
  <input type="button" onclick="document.getElementById('myForm').value='';" value="Reset test 4">
  <input type="button" onclick="document.getElementById('tab_source').value='';" value="Reset test 5">

【讨论】:

不客气(:如果它有效并且您认为它是一个答案,请您标记它吗?那太好了,谢谢(:

以上是关于在表单中重置输入和输出文本区域的主要内容,如果未能解决你的问题,请参考以下文章

关闭弹出模式时如何重置文本区域的大小?

网页设计,Access入门 2010,数学

javascript js-点击按钮,重置或者清空文本区域中的数据

Typescript - 手动刷新文本区域

使用引导程序在表单组中设置输入/文本区域的宽度

清除表单的文本区域和输入