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

您可以检测textarea中按下的键，并允许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;
};

＆＃13;

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

＆＃13;

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

＆＃13;

Javascript Textarea仅允许删除输入

1 个答案: