L'Auto-scaling input[type=text] à la largeur de valeur?

Question

Est-il un moyen de l'échelle de la largeur d'un <input type="text"> de la largeur de la valeur réelle?

Voici mon JSFiddle: http://jsfiddle.net/hEvYj/2/

Answer 1

Vous pouvez le faire facilement ce problème en définissant l' size attribut de la longueur de l'entrée des matières:

function resizeInput() {
    $(this).attr('size', $(this).val().length);
}

$('input[type="text"]')
    // event handler
    .keyup(resizeInput)
    // resize on page load
    .each(resizeInput);

Voir: http://jsfiddle.net/nrabinowitz/NvynC/

Cela semble ajouter un peu de rembourrage sur le droit, que je soupçonne est un navigateur dépendante. Si vous voulais que ce soit vraiment serré à l'entrée, vous pouvez utiliser une technique comme celle que je décris dans cette réponse, l'utilisation de jQuery pour calculer la taille en pixels de votre texte.

Answer 2

Sinon, vous pouvez utiliser un contenteditable durée plutôt que d'un élément de saisie.

<span contenteditable="true">dummy text</span>

Ceci a l'inconvénient possible que les utilisateurs peuvent entrer (coller) mais les sauts de ligne.

Answer 3

J'ai un plugin jQuery sur GitHub: https://github.com/MartinF/jQuery.Autosize.Input

Il reflète la valeur de l'entrée, calcule la largeur et l'utilise pour le réglage de la largeur de l'entrée.

Vous pouvez voir un exemple vivant ici: http://jsfiddle.net/mJMpw/6/

Exemple de comment l'utiliser (parce que certains de code est nécessaire lors de la publication d'un jsfiddle lien):

<input type="text" value="" placeholder="Autosize" data-autosize-input='{ "space": 40 }' />

input[type="data-autosize-input"] {
  width: 90px;
  min-width: 90px;
  max-width: 300px;
  transition: width 0.25s;    
}

Il vous suffit d'utiliser css pour définir min/max-width et utiliser une transition sur la largeur si vous voulez un joli effet.

Vous pouvez spécifier l'espace et de la distance à la fin, comme la valeur de la notation json pour les données-autosize-attribut d'entrée sur l'élément d'entrée.

Bien sûr, vous pouvez également initialiser à l'aide de jQuery

$("selector").autosizeInput();

Answer 4

Vous pouvez résoudre ce problème qu'ici :) http://jsfiddle.net/MqM76/217/

HTML:

<input id="inpt" type="text" />
<div id="inpt-width"></div>

JS:

$.fn.textWidth = function(text, font) {
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl =      $('<span>').hide().appendTo(document.body);
    $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
    return $.fn.textWidth.fakeEl.width(); 
};

$('#inpt').on('input', function() {
    var padding = 10; //Works as a minimum width
    var valWidth = ($(this).textWidth() + padding) + 'px';
    $('#'+this.id+'-width').html(valWidth);
    $('#inpt').css('width', valWidth);
}).trigger('input');

Answer 5

vérifiez ce plugin est le code source: http://jsbin.com/ahaxe