Encontré este código en Internet en algún lugar hace un tiempo para disminuir el número dependiendo de cuántos valores se hayan ingresado, no soy bueno con JavaScript en absoluto y aprenderé más sobre esto pronto.
Pero solo necesito una explicación de lo que hace la función JS fila por fila.
function numberOfCharacters(textbox,limit,indicatore){ chars = document.getElementById(textbox) .value.length; document.getElementById(indicatore).innerHTML = limit-chars; } <textarea rows="4" maxLength="255" onkeyup="numberOfCharacters('mytextbox',255,'characterLimit');" name="contact_message" id="mytextbox" placeholder="Message (255 Characters)"required></textarea> <div class="chars"> <span id="characterLimit">255</span> </div>Al cambiar el área de texto (al que se accede a través del evento onkeyup), se activará la función numberOfCharacters .
Recibe la identificación del área de texto ( 'mytextbox' ), el límite del área de texto (255) y la identificación donde necesita actualizar el límite de caracteres ( 'characterLimit' ).
La función numberOfCharacters accede a la entrada en el área de texto y cuenta la longitud de la entrada. El límite restante del área de texto será el límite real en el parámetro de función (255) menos la longitud de la entrada actual. La función calcula ese valor de diferencia y actualiza el contenido div de destino.
/* * Function name : numberOfCharacters * Parameters * textbox: String: Id of the input textarea * limit: Number: Actual limit of the textarea * indicatore: String: Id of the element where the linit is displayed */ function numberOfCharacters(textbox, limit, indicatore) { // Access the input in the textarea with document.getElementById(textbox).value // And // Access the length of current input with document.getElementById(textbox).value.length chars = document.getElementById(textbox).value.length; // Calculate the length of remaning characters and update the content of div element with id characterLimit as the differnce document.getElementById(indicatore).innerHTML = limit - chars; } <textarea rows="4" maxLength="255" onkeyup="numberOfCharacters('mytextbox',255,'characterLimit');" name="contact_message" id="mytextbox" placeholder="Message (255 Characters)" required></textarea> <div class="chars"> <span id="characterLimit">255</span> </div>Esta función maneja el evento onKeyUp de la entrada de texto, por lo que la función se activa cada vez que se suelta una tecla en el teclado mientras la entrada tiene el foco.
La función se llama con 3 argumentos vinculados: esta identificación del campo, el número máximo de caracteres y la identificación del intervalo en el que se escribe el indicador de cuántos caracteres quedan antes de alcanzar el máximo.
function numberOfCharacters(textbox,limit,indicatore){ chars = document.getElementById(textbox).value.length; // <-- get the current number of characters having been typed in the text input document.getElementById(indicatore).innerHTML = limit-chars; // <-- write the result of the substraction in the indicator span. }La función numberOfCharacters básicamente muestra la cantidad de caracteres disponibles que puede escribir en su área de texto. En su caso, el límite de caracteres es 255.
Veamos qué hace la función paso a paso.
function numberOfCharacters(textbox,limit,indicatore){ ... , se declara la función y acepta 3 argumentos, donde textbox es una identificación de <textarea> , límite de caracteres e indicador que es una identificación de <span> .
chars = document.getElementById(textbox) .value.length; En esta fila obtenemos la longitud total de los caracteres escritos en el cuadro de campo.
Calcule el valor por document.getElementById(indicatore).innerHTML = limit-chars; Rellenamos nuestra etiqueta span con el número de caracteres que quedan. <span id="characterLimit">(calculated value)</span>