Limitation des textes par la quantité d'espace qu'ils occupent

Question

Existe-t-il un moyen de limiter le nombre de lettres pouvant être insérées dans un champ de saisie en fonction de la taille de ce dernier ?

Par exemple, les W et les M occupent suffisamment d'espace pour en placer 34.

Mais si j'utilise des phrases normales, le même nombre de lettres ne prend que la moitié de la taille par rapport aux W et aux M.

Ce que je veux, c'est que je puisse écrire n'importe quoi tant que la taille du champ de saisie est suffisante. Est-ce possible ?

Answer 1

Tout d'abord, vous pouvez accéder à la taille de votre entrée avec quelque chose comme ceci :

const ele = document.getElementById('yourInputId');
const eleStyle = window.getComputedStyle(ele);
const inputSize = {width: eleStyle.width, height: eleStyle.heigth};

Ensuite, dans une autre méthode, en supposant que vous connaissiez la police et la taille de votre texte (si ce n'est pas le cas, consultez la documentation d'Angular), vous pouvez mettre en place une méthode comme celle-ci :

pixelLength(txt: string, font: number) {
  const canva = document.createElement('CANVAS');
  const attr = document.createAttribute('id');
  attr.value = 'myId';
  canva.setAttributeNode(attr);
  document.body.appendChild(canva);
  const c: any =  document.getElementById('myId');
  const ctx = c.getContext('2d');
  ctx.font = font.toString() + 'px Helvetica';
  const result = ctx.measureText(txt).width;
  document.body.removeChild(canva);
  return result;
}

Vous pourriez vouloir appeler cette méthode dans un contrôle de formulaire personnalisé, pour vérifier s'il sera plus long que inputSize.width .

Faites-moi savoir si quelque chose n'est pas clair ;)

Bon codage.