Misurare il testo di un input con JavaScript

In questa breve guida ti spiegherò come misurare la lunghezza del testo contenuto in un elemento <input> HTML (di tipo testo, type='text'), con del codice JavaScript.

Esistono varie tecniche per misurare il testo di un elemento HTML, come un paragrafo o un div, tuttavia, risulta più complicato misurare il contenuto di un area di input, proprio perché ha un valore variabile, dato dall’utente che utilizza la pagina web.

Qui di seguito ti mostrerò una semplice funzione JavaScript per eseguire questa misurazione.

Misurare del testo di un input HTML con JS

Un elemento di input HTML come ben sappiamo, consente di scrivere testo in un’apposita area dedicata, così che un utente possa digitare determinati valori al suo interno, per eseguire poi numerose azioni come: accesso ad un sito, invio di un messaggio etc…

Dunque, il testo contenuto in un elemento input è variabile e non fisso come quello di un semplice paragrafo. Questo complica l’analisi del testo per ottenere la misura del contenuto.

La tecnica utilizza per misurare il valore di un input testuale consiste nel creare un elemento canvas temporaneo, stampare il testo al su interno e poi procedere alla misurazione con funzioni native, quali measureText(). Vediamo lo script:

function MisuraTestoInput(elemento) {
  let text = elemento.value;
  const canvas = document.createElement("canvas");
  const cont = canvas.getContext("2d");
  const misura = cont.measureText(text);
  return misura.width;
}


//esempio di utilizzo:
var inp = document.getElementById('myinput');
console.log(MisuraTestoInput(inp));   // es. 51.85112

Nella funzione JavaScript chiamata MisuraTestoInput(), l’unico parametro richiesto è l’elemento di input interessato, come indicato nell’esempio.

Per ottimizzare la funzione sarebbe utile integrare anche il rilevamento del font del testo, in questo caso la funzione sarebbe la seguente:

function MisuraTestoInputWFont(elemento) {
  let text = elemento.value;
  let fontWeight = elemento.style.fontWeight;
  let fontSize = elemento.style.fontSize;
  let fontFamily = elemento.style.fontFamily;
  let font = fontWeight + " " + fontSize + " " + fontFamily;
  const canvas = document.createElement("canvas");
  const cont = canvas.getContext("2d");
  cont.font = font;
  const misura = cont.measureText(text);
  return misura.width;
}	

Quest’ultima serve a considerare lo stile del font e la grandezza per la misurazione, altrimenti lo script potrebbe restituire valori errati o inesatti tratti da un font predefinito invece che da quello effettivamente utilizzato; è preferibile utilizzare questa funzione.

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!


Articoli recenti:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

CAPTCHA