表单重置按钮需要 Javascript答案

【问题标题】：Javascript needed for form reset button表单重置按钮需要 Javascript
【发布时间】：2018-06-04 01:52:40
【问题描述】：

我有一个带有文本区域的表单以及一个 javascript 计数器，用于计算您在文本区域中键入的字符数。我需要一个按钮来重置输入到文本区域和计数器的内容。

这是我的表单代码：

<script type="text/javascript">
function change (el) {
    var max_len = el.name == 'left' ? 60 : 320;
    if (el.value.length > max_len) {
        el.value = el.value.substr(0, max_len);
    }
    document.getElementById(el.name + '_char_cnt').innerHTML = el.value.length;
    document.getElementById(el.name + '_chars_left').innerHTML = max_len - 
    el.value.length;
    return true;
}
</script>

<h2 style="background-color: #eee; padding: 10px 20px 10px 20px; margin-
bottom: 20px;">Enter meta title tag</h2>

<form id="title">
<textarea style="border: 1px solid #eb008b;" cols="100" name="left" 
rows="2" maxLength="60" onkeyup="change(this);"></textarea>You've typed <span id="left_char_cnt"><b>0</b></span> 
character(s) out of a possible 60. You are allowed <span 
id="left_chars_left"><b>lots</b></span> more

<input class="btn btn-primary" type="button" value="reset title" />

</form>

下面的 javascript 会重置输入到 textarea 中的文本，但不会重置跨度“left_char_cnt”内的计数器

<script>
function myFunction() {
    document.getElementById("title").reset();
}
</script>

需要什么 javascript 来重置两者？

【问题讨论】：

how to clear a span inside a div的可能重复
这个问题没有显示任何研究工作，您已经有一行使用document.getElementById 并且没有尝试使用document.getElementById("left_char_cnt") - 在How to reset a span using JavaScript 上进行简单搜索会显示几个具有所需答案的结果 -请查看标记的副本，其中有几个答案，包括使用 innerHTML 的 JavaScript 解决方案

标签： javascript html forms

【解决方案1】：

如果您没有以某种方式保存元素，则无法“重置”元素的文本/HTML。 reset() 仅适用于表单输入。

所以你要做的就是重写元素的 HTML 内容。

<script>
function myFunction() {
    document.getElementById("title").reset();
    document.getElementById("left_char_cnt").innerHTML = '<b>0</b>';
}
</script>

【讨论】：

请解释下投票，我的回答有什么不正确的地方吗？没看到……

【解决方案2】：

您计算文本中单词的脚本不起作用，但我编写了一个脚本来清除文本区域和计数

function myfun(){
document.getElementById('txtarea').value=' ';
document.getElementById('count').innerHTML='0';

}

<form id="title">
<textarea id="txtarea" style="border: 1px solid #eb008b;" cols="100" name="left" 
rows="2"></textarea>You've typed <span id="left_char_cnt"><b id=count>123</b></span> 
character(s) out of a possible 60. You are allowed <span 
id="left_chars_left"><b >lots</b></span> more

<input class="btn btn-primary" type="button" onclick="myfun()" value="reset title" />

</form>
<script type="text/javascript">
function change (el) {
    var max_len = el.name == 'left' ? 60 : 320;
    if (el.value.length > max_len) {
        el.value = el.value.substr(0, max_len);
    }
    document.getElementById(el.name + '_char_cnt').innerHTML = el.value.length;
    document.getElementById(el.name + '_chars_left').innerHTML = max_len - 
    el.value.length;
    return true;
}
</script>

【讨论】：

【解决方案3】：

最简单的方法是重用您已有的代码，并允许更改事件处理程序正确设置值。这样，如果你改变了那个函数的行为，那么重置也会改变以匹配它。

我还稍微修改了您的代码，使其在文本更改时更新，而不是在您离开文本区域时更新。

试试这个...

function change (el) {
    var max_len = el.name == 'left' ? 60 : 320;
    if (el.value.length > max_len) {
        el.value = el.value.substr(0, max_len);
    }
    document.getElementById(el.name + '_char_cnt').innerHTML = el.value.length;
    document.getElementById(el.name + '_chars_left').innerHTML = max_len - el.value.length;
    return true;
}

var textarea = document.querySelector("#title textarea");

textarea.addEventListener("keyup", function() { change(this); });

document.querySelector("#reset-button").addEventListener("click", function() {
  textarea.value = "";
  change(textarea);
});

<h2 style="background-color: #eee; padding: 10px 20px 10px 20px; margin-
bottom: 20px;">Enter meta title tag</h2>

<form id="title">
<textarea style="border: 1px solid #eb008b;" cols="100" name="left" 
rows="2"></textarea>You've typed <span id="left_char_cnt"><b>0</b></span> 
character(s) out of a possible 60. You are allowed <span 
id="left_chars_left"><b>lots</b></span> more

<input class="btn btn-primary" type="button" id="reset-button" value="reset title" />

</form>

【讨论】：

【解决方案4】：

var t = document.getElementsByTagName('textarea')[0];
var a = document.getElementById('left_char_cnt');
var b = document.getElementById('left_chars_left')
t.addEventListener('keyup',function(){
var value = t.value.length;
var maxval = 60;
a.innerHTML = value
b.innerHTML = (maxval- value)
if(value == 60){ a.maxLength = maxval}
})
 function resetVal(){
 t.value = null;
a.innerHTML = '<b>0</b>'
b.innerHTML = '<b>lots</b>'
}

<h2 style="background-color: #eee; padding: 10px 20px 10px 20px; margin-
bottom: 20px;">Enter meta title tag</h2>

<form id="title">
<textarea style="border: 1px solid #eb008b;" cols="100" name="left" 
rows="2" maxlength="60"></textarea>You've typed <span id="left_char_cnt"><b>0</b></span> 
character(s) out of a possible 60. You are allowed <span 
id="left_chars_left"><b>lots</b></span> more

<input class="btn btn-primary" type="button" onclick='resetVal()' value="reset title"/>

</form>

【讨论】：

【解决方案5】：

通过替换您的“myFunction()”来使用此功能

<script>
function myFunction() {
    document.getElementById("title").reset(); // reset your form
    document.getElementById("left_char_cnt").innerHTML = '<b>0</b>'; //reset your span counter
} 
</script>

【讨论】：