表单重置按钮需要 Javascript

Question

我有一个带有文本区域的表单以及计算您在文本区域中键入的字符数的 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 重置了输入到文本区域的文本，但它没有重置跨度“left_char_cnt”内的计数器

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

重置两者需要什么 javascript？

Answer 1

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

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

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