Live Demo

Question

我有一个textarea的问题类似于twitter的tweet textarea。就我而言，我需要限制textarea的长度并在标签中显示长度。

对于这个porpuse我有以下textarea：

<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属性（行和列）控制textarea的大小以包含大量字符。

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

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

2 个答案:

的JavaScript

Live Demo