1

我正在为 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>

谁能帮我解决这个问题？

预先感谢。

4

3 回答 3

1

如果您必须在页面加载时检查textarea length并显示它，最好喜欢：countdowncreate 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

于 2013-10-08T03:00:35.820 回答
1

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

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

小提琴

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

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);
}

小提琴

于 2013-10-08T03:02:02.703 回答
0

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

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

请注意，字符串参数是转义的，但您只需去掉斜线即可处理。

于 2015-10-15T15:43:46.420 回答