如何在 Textarea 中设置最小字符数

Posted 2023-05-07

【中文标题】如何在 Textarea 中设置最小字符数

【英文标题】：How do I set Minimum characters in a Textarea

【发布时间】：2018-12-21 01:23:34

【问题描述】：

我尝试在文本区域中为 cmets 设置最少字符数。我喜欢用户在提交表单之前输入最少的字符。我已经有一个代码来检查最大字符数。

如何修改此代码以使用评论文本区域的最小字符数？

我在里面添加了新代码。

var maxComments = 500;
    function limComments(obj) 
        while(obj.value.length > maxComments) 
            obj.value = obj.value.replace(/.$/,'');
        
    

非常感谢！

【问题讨论】：

你在textarea 本身上尝试过maxlength="500" minlength="5"

循环时？？？为什么不只是document.querySelector("[name=Q2C]").oninput=function() this.value=this.value.substring(0,maxComments)

我有一些用于 cmets 的盒子。如果他们在移动到新的评论框之前输入的字符少于所需的字符，我希望收到提醒。我使用 While 循环的原因是为了防止用户在评论框中粘贴文档。我试过 maxlength="500" minlength="5" 但它不会提醒任何错误。谢谢。

【参考方案1】：

这将依赖于内置属性，JS 用于“备份”。如果出于某种原因您想放弃内置，可以将它们替换为 data-mincount="10" 和 data-maxcount="500"。

如果您使用的是兼容 html5 的浏览器，并且支持 maxlength="500" 和 minlength="10" 属性，它将阻止输入超过 500 个字符。虽然它不会直接影响最小值字段，但它会阻止提交表单。然后浏览器本身会显示错误的条目。

编辑：注意到输入的修整，更新代码以反映。

function limComments(obj) 
  var charLimit = [obj.getAttribute('minlength'), obj.getAttribute('maxlength')];
  var fieldID = obj.getAttribute('id');

  if (obj.value.length >= charLimit[0] && obj.value.length <= charLimit[1]) 
    console.log("The comment in " + fieldID + " is just right.");
   else if (obj.value.length > charLimit[1]) 
    console.log("The comment in " + fieldID + " is too long.");
    obj.value = obj.value.substring(0, charLimit[1]); // Truncate to first 500 characters
   else 
    console.log("The comment in " + fieldID + " is too short.");
  

<label for="comment1">Comment 1</label>
<textarea rows="3" cols="85" maxlength="500" minlength="10" name="Q1C" onblur="limComments(this)" title="Comments" id="comment1" class="textarea" /></textarea>
<br>
<label for="comment2">Comment 2</label>
<textarea rows="3" cols="85" maxlength="500" minlength="10" name="Q2C" onblur="limComments(this)" title="Comments" id="comment2" class="textarea" /></textarea>
<br>
<label for="comment3">Comment 3</label>
<textarea rows="3" cols="85" maxlength="500" minlength="10" name="Q2C" onblur="limComments(this)" title="Comments" id="comment3" class="textarea" /></textarea>

【讨论】：

我通过输入 8 个字符尝试了此代码，然后移至一个新框，它不会发出任何警报。我在 else 之后添加了此代码： alert("请输入至少 150 个字符");我正在使用 IE 11。谢谢。

@JennyTran 那是因为 - 目前 - 它有 // Comment is too short - code some form of notice。那是你放置alert("too short")（或其他不会惹恼用户的东西）代码的地方。

是的。我为 3 添加了警报 // 评论太短 - 编写某种形式的通知，但是当我在第一个评论框中输入 8 个字符并移至第二个评论框时，它不会发出任何警报。谢谢。

它在文本区域中使用minlength，我将其设置为10。您必须将其设置为要触发它的数字。此外，如果您的<textarea> 确实没有 具有minlength 属性，它将无法匹配任何内容。

我什么都做了。 。你有一个例子让我在线测试吗？谢谢。