表单重置按钮需要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重置输入到textarea的文本但它没有重置跨度“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>

Answer 2

你的脚本计算文本中的单词不起作用，但我做了一个脚本来清除textarea和count

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>

Answer 3

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

我还稍微修改了你的代码，使其在文本发生变化时更新，而不是在你离开textarea时。

试试这个...

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>

Answer 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>

Answer 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>