web-dev-qa-db-fra.com

Obtenir la largeur du texte saisi lors de la frappe

J'ai un texte de type d'entrée

<input type="text" id="txtid">

Lorsque je commence à taper du texte à l'intérieur de l'entrée, je devrais pouvoir obtenir la longueur du texte saisi.

Voici ce que j'ai essayé:

document.getElementById("txtid").offsetWidth;

et

var test = document.getElementById("txtid");
var width = (test.clientWidth + 1) + "px";

Ces deux ne donnent pas la largeur du texte saisi

Fondamentalement, ce que je veux, c'est:

enter image description here

Supposons que input text la largeur est 320px. J'ai besoin de la largeur du texte saisi, c'est-à-dire 120px, qui ne cesse de changer lorsque j'entre.

javascripthtmlcssinput
23
Matarishvan

Je vois deux façons.

Premier:

Vous pouvez utiliser une div avec un contenu modifiable à la place. Comme ça, vous pouvez voir la largeur de la div.

var elemDiv = document.getElementById('a');

elemDiv.onblur = function() {
  console.log(elemDiv.clientWidth + 'px');
}
div {
  width: auto;
  display: inline-block;
}
<div id='a' contenteditable="true">Test</div>

Remarque: Comme le dit @Leon Adler, cette méthode permet de coller des images, des tableaux et un formatage à partir d'autres programmes. Vous avez donc peut-être besoin d'une validation avec javascript pour vérifier le contenu avant d'obtenir la taille.

Deuxième:

Utilisez un texte de type d'entrée et collez le contenu dans une div invisible. Et vous pouvez voir la largeur du div invisible.

var elemDiv = document.getElementById('a'),
  elemInput = document.getElementById('b');

elemInput.oninput = function() {
  elemDiv.innerText = elemInput.value;
  console.log(elemDiv.clientWidth + 'px');
}
.div {
  width: auto;
  display: inline-block;
  visibility: hidden;
  position: fixed;
  overflow:auto;
}
<input id='b' type='text'>
<div id='a' class='div'></div>

Note: Pour cette façon, vous devez avoir même police et taille de police sur input et div Mots clés.

15
R3tep

J'ai légèrement modifié la réponse de Chillers, car il semble que vous souhaitiez la largeur plutôt que le nombre de lettres. J'ai créé un span, qui est absolu positionné hors de l'écran. J'ajoute ensuite la valeur de l'entrée à celle-ci, puis j'obtiens la largeur de la travée. Pour le rendre plus sophistiqué, vous pouvez créer le span avec javascript.

Notez que l'entrée et la plage doivent avoir le même style CSS pour que cela soit précis.

document.getElementById("txtid").addEventListener("keyup", function(){
  var mrspan = document.getElementById("mrspan");
  mrspan.innerText = this.value;
  console.log(mrspan.offsetWidth + "px");
});
<input type="text" id="txtid">
<span id="mrspan" style="position:absolute;left:-100%;"></span>
10
WizardCoder

MISE À JOUR

Deux choses que je veux mettre en avant

  • Ne rien afficher ne vous donnera pas de offsetWidth si nous essayons d'utiliser Vanilla JS. on peut utiliser visibility: hidden; ou opacity:0 pour ça.

  • nous devons ajouter overflow:auto à la cachée span ou bien le texte sera déformé à la ligne suivante s'il dépasse la largeur de la fenêtre du navigateur et la largeur restera fixe ( largeur de la fenêtre )

ANCIEN

Vous pouvez essayer cette approche

Ajouter un span et le cacher

<span id="value"></span>

puis onkeyup ajoutez le texte du textfield sur votre span caché et obtenez sa largeur.

AVEC L'AIDE DE JQUERY

EXTRAIT ( [~ # ~] mis à jour [~ # ~] )

function update(Elm,value) {
     $('#value').text(value);
     var width =   $('#value').width();
     $('#result').text('The width of '+ value +' is '+width +'px');
   
}
#value{
  display:none;
  overflow:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" oninput='update(this,this.value)'>
<span id="value"></span>
<div id="result"></div>

TILISATION DE JS UNIQUEMENT

EXTRAIT ( [~ # ~] mis à jour [~ # ~] )

function update(Elm,value) {
     var span = document.getElementById('value');
     span.innerHTML = value;    
     var width = span.offsetWidth;
     document.getElementById('result').innerHTML = 'The width of '+ value +' is '+ width+ 'px';
   
}
#value{
  opacity:0;
  overflow:auto;
}
<input type="text" oninput='update(this,this.value)'>
<span id="value"></span>
<div id="result"></div>
5
Nadir Laskar

La méthode Canvas measureText() peut être utile dans un tel cas. Appelez la fonction suivante chaque fois que vous avez besoin d'obtenir la largeur de votre texte:

function measureMyInputText() {
    var input = document.getElementById("txtid");
    var c = document.createElement("canvas");
    var ctx = c.getContext("2d");
    var txtWidth = ctx.measureText(input.value).width;

    return txtWidth;
}

Pour un résultat plus précis, vous pouvez définir le style de police sur le canevas, surtout si vous définissez certaines propriétés de police sur l'entrée. Utilisez la fonction suivante pour obtenir la police d'entrée:

 function font(element) {
     var prop = ["font-style", "font-variant", "font-weight", "font-size", "font-family"];
     var font = "";
     for (var x in prop)
         font += window.getComputedStyle(element, null).getPropertyValue(prop[x]) + " ";

     return font;
 }

Ensuite, ajoutez cette ligne à la fonction frist:

ctx.font = font(input);
4
Llro dasmaz