No puedo encontrar ningún ejemplo en el que desee que el usuario ingrese al menos una cantidad x de caracteres en un área de texto. No hay longitud máxima, solo mínima. ¿Hay alguna solución simple para esto?
Esto es lo que tengo ahora.
Un área de texto simple
<textarea id="textComment" name="comment" ></textarea>Área div que muestra x caracteres restantes para escribir
<div>Characters left <span id="charsLeft"></span></div>Si es posible, deshabilite el botón de publicación hasta llegar a x caracteres.
<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>Esto se hace con 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); } }); });Cambia el HTML a esto:
<textarea id="textComment" name="comment" ></textarea> <div>Characters left: <a id="charCount"></a> <span id="charsLeft"></span></div> <button >Add comment</button>Cuando el usuario inserta más de X caracteres, jq se activará y le dará al botón la propiedad onclick. Antes de llegar al límite de caracteres, el botón no hará nada. Y si el usuario escribe más de X caracteres y luego borra algunos y el número cae por debajo de X, el botón volverá a no hacer nada.
Imagino que se podría simplificar pero así se puede entender cómo funciona.
Puede cambiar la longitud mínima en el elemento textarea => 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>