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