Javascript or Jquery textarea counter with minimum text length?-CodePudding

I can't find any examples when you want the user to input at least x number of characters in a textarea. There is no max length, only minimum. Is there any simple solutions to this?

This is what I have now.

A simple textarea

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

Div area showing x characters remaining to write

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

If possible, disable post button until x characters reached.

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

CodePudding user response：

You can change the minimum length on textarea element => 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>

CodePudding user response：

<!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>

CodePudding user response：

This is done with 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);
   }
     
});
});

Change the HTML to this:

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

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

    <button >Add comment</button>

When the user inserts more than X characters jq will kick in and give the button the onclick property. Before reaching the character limit the button will do nothing. And if the user writes more than X characters and then erases some and the number falls below X the button will once again do nothing.

I imagine it could be simplified but this way you can understand how it works.