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

Question

我有一个类似twitter的tweet 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 属性(行和列)控制文本区域的大小以包含粗略的字符数。