如何在文本区域中设置最小字符数

Question

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

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

我添加了新代码。

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

非常感谢！

Answer 1

这将依赖内置属性，用JS "backup"。如果出于某种原因你想放弃内置，它们可以被替换为 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>

如何在文本区域中设置最小字符数

How do I set Minimum characters in a Textarea

javascript

jquery

textarea