如何在 HTML/JS 中清除 textarea 表单答案

【问题标题】：How to clear textarea form in HTML/JS如何在 HTML/JS 中清除 textarea 表单
【发布时间】：2018-03-15 09:10:53
【问题描述】：

如何在不加载外部库的情况下清除 HTML/JS 中的表单？

这是我迄今为止尝试过的方法以及它们是如何失败的：

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

这不会清除表单，只会将其重置为其原始值。

form.getElementsByTagName('textarea').innerHTML = ''

这只会在未编辑的情况下清除表单。如果表单已被编辑，它什么也不做。这是一个JSfiddle，这两个已经组合在一起了，但是如果您编辑文本区域并单击清除，您会发现它不起作用（source of JSfiddle）。

【问题讨论】：

你为什么不把innerHTML替换成value呢？
为什么这被否决了？
这个世界多么残酷……

标签： javascript html forms

【解决方案1】：

使用text[i].value 代替text[i].innerHTML：

function resetForm(form) {
    // clearing inputs
    var inputs = form.getElementsByTagName('input');
    for (var i = 0; i<inputs.length; i++) {
        switch (inputs[i].type) {
            case 'hidden':
            case 'text':
                inputs[i].value = '';
                break;
            case 'radio':
            case 'checkbox':
                inputs[i].checked = false;   
        }
    }
    
    // clearing selects
    var selects = form.getElementsByTagName('select');
    for (var i = 0; i<selects.length; i++)
        selects[i].selectedIndex = 0;
    
    // clearing textarea
    var text= form.getElementsByTagName('textarea');
    for (var i = 0; i<text.length; i++)
        text[i].value= '';
    
    return false;
}

<form method='post' action='someaction.php' name='myform'>

<input type='text' name='text1' value="a value">
<input type='text' name='text2'>

<input type='checkbox' name="check1" checked>Check Me
<input type='radio' name="radio1" value="a" >
<input type='radio' name="radio1" value="b" checked>
<input type='radio' name="radio1" value="c">

<textarea rows="2" cols="20" name='textarea1'>
some text    
</textarea>

<select name='select1'>
  <option value="volvo">Volvo</option>
  <option value="saab" selected>Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<input type='reset' value='Reset' name='reset' onclick="return resetForm(this.form);">
<input type='submit' value='Submit' name='submit'>

</form>

【讨论】：

【解决方案2】：

尝试以下我编辑的方式，它会清除 textarea https://gist.github.com/anonymous/76b3c08a2d38ddafc15791501173a6b8

【讨论】：

仅链接的答案在 SO 上不被视为有价值。