页面加载时字符数不计算答案

【问题标题】：Characters count didn't count when page loading页面加载时字符数不计算
【发布时间】：2013-10-14 19:39:35
【问题描述】：

我正在为 textarea 创建字符数，textarea 中的限制文本为 140 个字符。我使用 javascript 创建了函数来计算 textarea 中的字符。在 textarea 下面，我显示了左边的字符。当我在 textarea 中按下键时，字符将被计数。加载到该页面时，该页面中有一些值，但剩余的字符不计算在内。当我将鼠标放在该文本区域并按下键时，它会计数。我希望在页面加载时根据 textarea 中的值计算剩余的字符数。

这是我的代码

1. 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;
  }
}

2。 HTML & PHP

$tweet = "Hello world.";
<form name='myform'>
<textarea style='margin-bottom:10px; width: 750px;' class='text_tweet'
  name='limitedtextarea' rows='5' maxlength='140'
  onKeyDown='limitText(this.form.limitedtextarea,this.form.countdown,140);'
  onKeyUp='limitText(this.form.limitedtextarea,this.form.countdown,140);'>".$tweet."
</textarea>
<br><font size='1'>(Maximum characters: 140)<br>
You have <input readonly type='text' name='countdown' size='3' value='140'> characters left.</font>
</form>

谁能帮我解决这个问题？

提前致谢。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

如果您必须在页面加载时检查textarea length 并在countdown 中显示，最好create one function and call it on body load 喜欢：

JavaScript：

function bodyOnload(limitNum){
var tweet = document.forms['myform'].elements['limitedtextarea'].value;
document.forms['myform'].elements['countdown'].value = limitNum - tweet.length;
}

HTML：

<body onload="bodyOnload(140)">
<form name='myform'>
<textarea style='margin-bottom:10px; width: 750px;' class='text_tweet'
  name='limitedtextarea' rows='5' maxlength='140'
  onKeyDown='limitText(this.form.limitedtextarea,this.form.countdown,140);'
  onKeyUp='limitText(this.form.limitedtextarea,this.form.countdown,140);'>Hello world.
</textarea>
<br><font size='1'>(Maximum characters: 140)<br>
You have <input readonly type='text' name='countdown' size='3' value='140'> characters left.</font>
    </form>
</body>

DEMO FIDDLE

【讨论】：

@user2738520。它应该工作。什么不工作？您是否尝试过使用 Firebug for FF 等工具进行调试。检查这个小提琴：jsfiddle.net/vnhra

【解决方案2】：

您可以在加载时调用该函数，使用与 keydown 相同的参数。

window.onload = function () {
    var frm = document.getElementsByName('myform')[0];
    limitText(frm.limitedtextarea,frm.countdown , frm.countdown.value);
}

Fiddle

但我建议您摆脱内联属性并自己注册事件。

window.onload = function () {
    var limitcount = document.getElementsByName('countdown')[0],
        limitNum = 140;
   //Register the listener
    document.getElementsByName('limitedtextarea')[0].addEventListener('keydown', function () {
        if (this.value.length > limitNum) {
            this.value = this.value.substring(0, limitNum);
        } else {
            limitcount.value = limitNum - this.value.length;
        }
    });

    //on load trigger the event
    dispatchEvent(document.getElementsByName('limitedtextarea')[0], "keydown");
}

function dispatchEvent(element, eventName) {
     if ("createEvent" in document) {
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent(eventName, false, true);
        element.dispatchEvent(evt);
    } else element.fireEvent("on" + eventName);
}

Fiddle

【讨论】：

@user2738520 如果不尝试深入研究，这应该可以工作。将调试点放在方法等中，看看它是否进入。您是否也尝试了我提供的第二种方法？
我忘了告诉你，还有不止一个文本区域（从数据库循环）。

【解决方案3】：

如果我确实理解这一点，这就是你所需要的。

此代码将在您每次松开按键时更新<p> 内的文本；

它还设置了一个起始值，所以当页面加载时它已经告诉了限制；

<textarea id="txt" onkeyup="count(140,\'txt\',\'msg\');"></textarea>
    <p id="msg">140</p>
    <script>
        function count(c,txtid,msgid){
        document.getElementById(msgid).innerText = c - document.getElementById(txtid).value.length;
        }
    </script>

请注意，字符串参数是转义的，但您可以将斜杠去掉。

【讨论】：