Javascript 或 Jquery 具有最小文本长度的文本区域计数器？

Question

当您希望用户在文本区域中输入至少 x 个字符时，我找不到任何示例。没有最大长度，只有最小长度。有什么简单的解决办法吗？

这就是我现在拥有的。

一个简单的文本区域

<textarea id="textComment" name="comment" ></textarea>

Div 显示剩余 x 个字符的区域

<div>Characters left <span id="charsLeft"></span></div>

如果可能，禁用 post 按钮直到达到 x 个字符。

<button onclick="frmComment.submit();return false;">Add comment</button>

Answer 1

这是用jq完成的：

$(document).ready(function(){

//Set this to whatever size you want 
var characterSize = ;
$("#charCount").text(characterSize);

$("#textComment").keyup(function() {
    
  count = $("#textComment").val().length;
  
  if(count < characterSize){
  $("#charCount").text(characterSize - count);
  }
  else
  {
    $("#charCount").text(0);
  }

  if ($("#textComment").val().length >= characterSize){
  $("button").attr('onclick', 'frmComment.submit()', 'return false');
  }

  else {
    $("button").removeAttr('onclick', null);
   }
     
});
});

将 HTML 更改为：

    <textarea id="textComment" name="comment" ></textarea>

    <div>Characters left: <a id="charCount"></a> <span id="charsLeft"></span></div>

    <button >Add comment</button>

当用户插入超过 X 个字符时，jq 将启动并为按钮提供 onclick 属性。在达到字符限制之前，该按钮将不执行任何操作。如果用户写了超过 X 个字符，然后删除了一些，并且数字低于 X，则该按钮将再次不执行任何操作。

我想它可以被简化，但这样你就可以理解它是如何工作的。

Answer 2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <textarea name="" id="textComment" cols="30" rows="10"></textarea>
    <script>
      var maxln = 5; //write your max length
      document.getElementById("textComment").addEventListener("keyup", () => {
        if (document.getElementById("textComment").value.length >= maxln) {
          document.getElementById("textComment").value = document
            .getElementById("textComment")
            .value.substring(0, maxln); // this removes any character after max value
        }
      });
    </script>
  </body>
</html>

Answer 3

您可以更改文本区域元素的最小长度 => data-minLength="10"

$(document).ready(function() {
 $("#textComment").on("keyup", function(){
     var minLength = $(this).attr("data-minlength");
     var currentLength = $(this).val().length;
     var remaining = parseInt(minLength) - parseInt(currentLength)
     $("#charsLeft").text((remaining < 0 ? 0: remaining));
     
     if (parseInt(currentLength) < parseInt(minLength))
     {
         $("#commentBtn").prop("disabled", true);
     } else{
         $("#commentBtn").prop("disabled", false);
     }
     
     
 });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="textComment" data-minLength="10" name="comment" ></textarea>
<div>Characters left: <span id="charsLeft"></span></div>
<button id="commentBtn" disabled onclick="frmComment.submit();return false;">Add comment</button>

Javascript 或 Jquery 具有最小文本长度的文本区域计数器？

Javascript or Jquery textarea counter with minimum text length?

javascript

jquery

counter

textarea