TextCounter＆觸發innerHTML在兩個單獨的輸入區域

我剛開始學習Javascript。我有兩個問題關於TextCounter &觸發innerHTML。TextCounter＆觸發innerHTML在兩個單獨的輸入區域

我的代碼如下，如何分別觸發兩個輸入的innerHTML？
爲什麼警報信息「超過!!」仍然顯示，同時刪除textarea中的字數？

有人能幫忙嗎？非常感激！

HTML

<html> 
<head> 
</head> 
<body> 

    <form> 
     <textarea name="line01" rows="3" style="width:340px;" 
onKeyUp="textCounter(this.form.01,this.form.countDisplay01,10);" 
onKeyDown="textCounter(this.form.01,this.form.countDisplay01,10);"> 
     </textarea> 
     <br> 
     <input readonly type="text" name="countDisplay01" width: 25px" 
value="10">characters remaining 
     <p id="go1"></p> 
    </form> 

    <form> 
     <textarea name="line02" rows="3" style="width:340px;" 
onKeyUp="textCounter(this.form.02,this.form.countDisplay02,8);" 
onKeyDown="textCounter(this.form.02,this.form.countDisplay02,8);"> 
     </textarea> 
     <br> 
     <input readonly type="text" name="countDisplay02" width: 25px" 
value="8">characters remaining 
     <p id="go2"></p> 
    </form> 
</body> 
</html>

的Javascript

<script> 
    function textCounter(textField, showCountField, maxAmount) { 
     if (textField.value.length <= maxAmount) { 
      showCountField.value = maxAmount - textField.value.length; 
     } else { 
      document.getElementById("go1").innerHTML = "<span 
style='color:red'>Over!!</span>"; 
      document.getElementById("go2").innerHTML = "<span 
style='color:red'>Over!!</span>"; 
      textField.value = textField.value.substring(0,maxAmount); 
     } 
</script>

來源

2017-04-21 ycd

用下面的代碼

HTML

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Text Counter</title> 
</head> 
<body> 
<form> 
<textarea name="01" rows="3" style="width:340px;" 
onKeyUp="textCounter(this.form['01'],this.form.countDisplay01,10,1);" 
onKeyDown="textCounter(this.form['01'],this.form.countDisplay01,10,1);"> 
</textarea> 
<br> 
<input readonly type="text" name="countDisplay01" style="width: 25px;" value="28"> characters remaining 
<p id="go1"></p> 
</form> 

<form> 
<textarea name="02" rows="3" style="width:340px;" 
onKeyUp="textCounter(this.form['02'],this.form.countDisplay02,8,2);" 
onKeyDown="textCounter(this.form['02'],this.form.countDisplay02,8,2);"> 
</textarea> 
<br> 
<input readonly type="text" name="countDisplay02" style="width: 25px" value="15">characters remaining 
<p id="go2"></p> 
</form> 
</body> 
</html>

嘗試

SCRIPT

<script> 
function textCounter(textField, showCountField, maxAmount,id) { 
    if (textField.value.length <= maxAmount) { 
     showCountField.value = maxAmount - textField.value.length; 
     document.getElementById('go'+id).innerHTML = ''; 
    } else { 
     document.getElementById('go'+id).innerHTML = '<span style="color:red">Over!!</span>'; 
     textField.value = textField.value.substring(0,maxAmount); 
    } 
} 
</script>

來源

2017-04-21 06:17:48

非常感謝你的幫助！它工作完美！ – ycd

當您使用與數字開頭的名稱，它不是一個有效的變量。你應該通過字典查找訪問：

textCounter(this.form['01'],this.form.countDisplay01,10);

對於警報文本，你應該第一個if子句中重置innerHTML：

if (textField.value.length <= maxAmount) { 
    showCountField.value = maxAmount - textField.value.length; 
    document.getElementById("go1").innerHTML = ""; 
    document.getElementById("go2").innerHTML = ""; 
} else { 
    document.getElementById("go1").innerHTML = "<span style='color:red'>Over!!</span>"; 
    document.getElementById("go2").innerHTML = "<span style='color:red'>Over!!</span>"; 
    textField.value = textField.value.substring(0,maxAmount); 
}

這將刪除警報文本，在下一個按鍵。如果您想立即刪除文本，您有兩種選擇：

忘記顯示錯誤。
顯示大約幾分之一秒的錯誤，然後將其刪除。使用類似setTimeout的東西。但是你應該記住，窗口在你的函數返回之前不會重繪。因此，首先設置警報文本，然後在你的函數結束時刪除它，將是一樣的做選擇1

來源

2017-04-21 05:57:16

沒意識到我粘貼這裏有錯誤的名稱格式。尷尬。非常感謝您的幫助和解釋！ – ycd

TextCounter＆觸發innerHTML在兩個單獨的輸入區域

回答

相關問題