javascript - 如何向 javascript 文本区域添加一个计数器，该计数器像 Twitter 一样计数，但不是向下计数，而是最多增加到 150 个字符

Question

我对 javascript 及其实现知之甚少，但我发现了这个:

<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } else {
        limitCount.value = limitNum - limitField.value.length;
    }
}
</script>

然后用这一段来实现它:

<form name="myform">
<textarea name="limitedtextarea" onKeyDown="limitText(this.form.limitedtextarea,this.form.countdown,100);" 
onKeyUp="limitText(this.form.limitedtextarea,this.form.countdown,100);">
</textarea><br>
<font size="1">(Maximum characters: 100)<br>
You have <input readonly type="text" name="countdown" size="3" value="100"> character left.</font>
</form>

如何使其不倒数而是最多数到 150 个字符？

Answer 1

这是您需要的代码:

Javascript部分:

<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } else {
        // notice I set the value of the count to the length of the field
        // rather than setting it to the max chars - the length of the field
        limitCount.value = limitField.value.length;
    }
}
</script>

HTML 部分:

<!-- changed all occurrences of 100 to 150 to match your specified max characters -->
<form name="myform">
<textarea name="limitedtextarea" onKeyDown="limitText(this.form.limitedtextarea,this.form.countdown,150);" 
onKeyUp="limitText(this.form.limitedtextarea,this.form.countdown,150);">
</textarea><br>
<font size="1">(Maximum characters: 150)<br>
<!-- here I changed "You have x characters left" to "You have used x characters." -->
You have used <input readonly type="text" name="countdown" size="3" value="0"> characters.</font>
</form>

工作示例:http://jsfiddle.net/EcDBE/

但是，我建议尝试真正理解我所做的更改，而不是简单地复制和粘贴所提供的代码。为了帮助您完成此操作，我在代码中添加了注释以显示我所做的更改。