代码之家 › 专栏 › 技术社区 › Jenny Tran

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

textarea jquery javascript

-3

Jenny Tran · 技术社区 · 6 年前

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

如何修改此代码以使用注释文本区域的最小字符?

我添加了新代码。

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

非常感谢!

1 回复 | 直到 6 年前

Matthew Moore 6 年前

这将依赖于内置属性,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>