Question

我正在为textarea创建字符数，textarea中的限制文本为140个字符。我用javascript创建了函数来计算textarea中的字符。在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＆amp; 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>

任何人都可以帮我解决这个问题吗？

提前感谢。

Answer 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

Answer 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

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

请注意，字符串参数是scaped但你只需要删除斜杠即可。

页面加载时字符数不计

3 个答案: