自动删除 textarea 上的文本答案

【问题标题】：Auto delete text on textarea自动删除 textarea 上的文本
【发布时间】：2020-06-20 05:09:29
【问题描述】：

如果文本行超过 100，如何自动删除 textarea 上的文本？我想这样做是因为它会降低浏览器的速度。

HTML：

<div class="form-group">
<textarea class="form-control" id="text" wrap="off"
placeholder="Autodelete the text here if value exceed more than 100!"></textarea>
</div>

【问题讨论】：

您要删除整个文本吗？还是 100 个字符后的文本？到目前为止你尝试过什么？

标签： javascript html auto

【解决方案1】：

这是我建议做的事情，这可能有助于真正保证它在射程上的安全。

let text = document.getElementById('text'); //Select your textarea
text.addEventListener("keyup" (e)=> {
    //Make it listen to a keyup event
    //So if someone left a key pressed, the screen will show the slice happening
    if (e.target.value.length > 100) e.target.value = e.target.value.slice(0,100);
    //Then, if its value exceeds 100 length, use slice method which create a new string
    //So, as it creates a new string you save it with assign operator
});

希望能解决您的问题。如果您需要澄清一些事情，请告诉我。

【讨论】：

【解决方案2】：

document.getElementById('text').onkeyup = function () {
 console.log('text', this.value.length)
 if (this.value.length > 100) {
  this.value = '';
 }
};

<div class="form-group">
<textarea class="form-control" id="text" wrap="off"
placeholder="Autodelete the text here if value exceed more than 100!"></textarea>
</div>

你可以用普通的javascript试试这个。

【讨论】：

【解决方案3】：

使用maxlength 获得最大字符数。

maxlength="nuber_of_characters"

<div class="form-group">
<textarea class="form-control" id="text" maxlength="100" 
wrap="off" placeholder="Autodelete the text here if value 
exceed more than 100!"></textarea>
</div>

注意：如果你想删除整个文本然后用js计算长度并清空整个文本。参考：Count textarea characters

【讨论】：

【解决方案4】：

您可以简单地使用 maxlength 属性并将值设置为 100

<textarea class="form-control" id="text" wrap="off" maxlength=100
placeholder="Autodelete the text here if value exceed more than 100!"> 
</textarea>

如果这不起作用，那么 - 您首先需要添加javascript函数，其中正在计算textarea值的长度，然后当值变为> 100时禁用textarea，以便用户无法添加更多。

document.getElementById('text').onkeyup = function () {
     console.log('text', this.value.length)
     if (this.value.length > 100) {
         alert('Limit exceeded to '+this.value.length)
      this.disabled = true;
     }
    };


<div class="form-group">
   <textarea class="form-control" id="text" wrap="off"
   placeholder="Autodelete the text here if value exceed more than 100!"> 
   </textarea>
</div>

此代码有一个阴暗面，如果用户不断发送垃圾邮件，则不会触发 if 条件。当用户长按后停止时，文本区域将被禁用。

【讨论】：

【解决方案5】：

您可以将 maxlength 属性设置为 100，例如 -

<textarea class="form-control" id="text" wrap="off" maxlength=100
placeholder="Autodelete the text here if value exceed more than 100!"> 
</textarea>

这不会让用户输入超过 100 个字

【讨论】：