textarea 中的事件 onchange 在触摸 UI 之前不会触发

Question

我对类似于 twitter 的推文 textarea 的 textarea 有疑问。就我而言，我需要限制文本区域的长度并在标签中显示长度。

对于这个porpuse，我有以下文本区域：

<textarea id="text_content" name="text_content" onkeyup="return limitCharacters(event,140);" onchange="updateCounter(this,140);"></textarea>

limitCharacters 函数是这样的：

function limitCharacters(key_event, limit){
    var specialCharacters = [8,46]; //Delete and supr keycodes
    var unicode_value = String.fromCharCode(key_event.charCode)
    var textarea = document.getElementById("text_content");
    var textarea_currentlength = textarea.value.toString().length;
    for(i=0;i<specialCharacters.length;i++){
        if(specialCharacters[i] == key_event.keyCode){
            return true;
        }
    }
    if(textarea_currentlength <= limit-1){
        return true;
    }
    return false;
}

它允许使用 supr 并删除和限制字符。 另外，我有一个触发 onchange 事件的函数：

function updateCounter(textarea, limit){
    var textarea_currentlength = textarea.value.toString().length;
    var label_restantes = document.getElementById("remaining_chars");
    label_restantes.textContent = limit - textarea_currentlength;
}

我不能在同一个函数中执行这两个操作，因为在完成 onkeyup 事件后，按键的长度会发生变化。我会得到一个错误的长度。

问题是直到我用鼠标触摸 UI 或者我切换到另一个窗口或类似情况时才会触发 onchange 事件。 onkeyup改变值后是否可以自动触发onchange？

Answer 1

jsfiddle

javascript：

var elem = document.getElementById('dd');
var msg = document.getElementById('msg');
var len = 150;
function f(){
    var v = elem.value;
    if (v.length>len) elem.value = v.substring(0,len);
    else
        msg.innerHTML = v.length;
}

//elem.onchange = f;
elem.onkeyup = f;
elem.onkeydown = f;

html：

<textarea name="" id="dd" cols="30" rows="10"></textarea>
<p>message length :<span id="msg"></span></p>

如果您想要特定长度的文本。

或者您可以使用 html 属性（行和列）控制文本区域的大小以包含大致数量的字符。

Answer 2

为什么需要让用户使用 delete 和 backspace ？那些已经工作了：

JavaScript

/* OnKeyUp event of the textarea*/
document.getElementById('myText').onkeyup = function() {

    /* We store the counter div element in a counter variable */
    var counter = document.getElementById('counter');

    /* If the content length of the textarea is greater than 75,
       delete the overflow. */
    if(this.value.length > 75)
        this.value = this.value.substring(0,75);

    /* Update the counter's value */
    counter.innerHTML = (75-this.value.length) + "/75";
};

Live Demo