页面加载时字符数不计算在内

Characters count didn't count when page loading

本文关键字：计算 字符 加载      更新时间：2023-09-26

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

这是我的代码

1. 脚本 

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>

谁能帮我解决这个问题？

提前谢谢。

如果您必须在页面加载时检查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>

演示小提琴

您可以在加载时调用该函数，使用与 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);
}

小提琴

如果我理解正确，这就是你需要的。

每次松开键时，此代码都会更新<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>

请注意，字符串参数是转义的，但您只需删除斜杠即可解决。

相关文章：