Javascript Textarea 只允许删除输入

Question

我有一个带有文本区域元素的表单。我想要限制输入大小，一旦用户达到限制，他应该能够清除字符，直到达到允许的大小。一旦达到最大大小，禁用元素将不会有效，因为用户也无法清除文本。另外，我不想清除我这边的输入，因为这可能会让用户感到厌烦。

var message = document.getElementById("Id"); 
  message.addEventListener("keydown", callback, false);
  function callback(){
    if(message.value.length > 25){
      alert("text longer than allowed");
//      Allow to delete, do not add.    
} 

Answer 1

您可以检测在文本区域内按下了哪个键，并允许使用 backspace、Ctrl+* 以及使用键盘箭头进行导航。

如果已达到限制，您还需要禁用 paste 事件，如果粘贴的文本长度较长，则将其剪切到您的限制:

message.onpaste = function(e) {
    //Cancel paste if limit has been reached
    if (this.value.length > 25) return false;
    else{
        clipboardData = e.clipboardData || window.clipboardData;
        pastedData = clipboardData.getData('Text');
        //If there's not enough chars left for the whole paste to go through : cut it
        if(pastedData.length + this.value.length > 25){
          e.stopPropagation();
          e.preventDefault();
          this.value += pastedData.substring(0,25 - this.value.length + 1);
        }
    }
};

message.onkeydown = function (e) {
    e = e || window.event;
    //8 : Backspace / [37-40] : Arrow keys / ctrlKey : Ctrl + *
    if ([8,37,38,39,40].indexOf(e.keyCode) == -1 && !e.ctrlKey) {
        if (this.value.length > 25) return false;
    }else return true;
};

var message = document.getElementById('myText');
message.onpaste = function(e) {
  if (this.value.length > 25) return false;
  else{
    clipboardData = e.clipboardData || window.clipboardData;
    pastedData = clipboardData.getData('Text');
    
    if(pastedData.length + this.value.length > 25){
      e.stopPropagation();
      e.preventDefault();
      this.value += pastedData.substring(0,25 - this.value.length + 1);
    }
  }
};

message.onkeydown = function(e) {
  e = e || window.event;
  if ([8, 37, 38, 39, 40].indexOf(e.keyCode) == -1 && !e.ctrlKey) {
    if (this.value.length > 25) return false;
  } else return true;
};

<textarea id="myText"></textarea>