faire grandir le champ de saisie de texte html au fur et à mesure que je tape ?

Question

Je peux définir la taille de saisie de texte initiale en css, comme ceci :

 width: 50px;

Mais j'aimerais qu'il grandisse lorsque je tape jusqu'à ce qu'il atteigne par exemple 200px. Cela peut-il être fait directement en css, html, de préférence sans javascript ?

Publiez également vos solutions js/jquery bien sûr, mais si cela est faisable sans elles, tant mieux.

mon essai ici:

http://jsfiddle.net/jszjz/2/

Answer 1

Je viens de l'écrire pour vous, j'espère qu'il vous plaira :) Aucune garantie que ce soit cross-browser, mais je pense que c'est le cas :)

 (function(){
    var min = 100, max = 300, pad_right = 5, input = document.getElementById('adjinput');

    input.style.width = min+'px';
    input.onkeypress = input.onkeydown = input.onkeyup = function(){
        var input = this;
        setTimeout(function(){
            var tmp = document.createElement('div');
            tmp.style.padding = '0';
            if(getComputedStyle)
                tmp.style.cssText = getComputedStyle(input, null).cssText;
            if(input.currentStyle)
                tmp.style.cssText = input.currentStyle.cssText;
            tmp.style.width = '';
            tmp.style.position = 'absolute';
            tmp.innerHTML = input.value.replace(/&/g, "&")
                                       .replace(/</g, "&lt;")
                                       .replace(/>/g, "&gt;")
                                       .replace(/"/g, "&quot;")
                                       .replace(/'/g, "&#039;")
                                       .replace(/ /g, '&nbsp;');
            input.parentNode.appendChild(tmp);
            var width = tmp.clientWidth+pad_right+1;
            tmp.parentNode.removeChild(tmp);
            if(min <= width && width <= max)
                input.style.width = width+'px';
        }, 1);
    }
})();

JSFiddle

Answer 2

Si vous définissez l'étendue à afficher : bloc en ligne, le redimensionnement automatique horizontal et vertical fonctionne très bien :

 <span contenteditable="true" 
      style="display: inline-block;
             border: solid 1px black;
             min-width: 50px; 
             max-width: 200px">
</span>

Answer 3

Que diriez-vous de modifier par programme l'attribut size sur l'entrée ?

Sémantiquement (imo), cette solution est meilleure que la solution acceptée car elle utilise toujours des champs de saisie pour la saisie de l'utilisateur, mais elle introduit un peu de jQuery. Soundcloud fait quelque chose de similaire pour leur étiquetage.

 <input size="1" />

$('input').on('keydown', function(evt) {
    var $this = $(this),
        size = parseInt($this.attr('size'), 10),
        isValidKey = (evt.which >= 65 && evt.which <= 90) || // a-zA-Z
                     (evt.which >= 48 && evt.which <= 57) || // 0-9
                     evt.which === 32;

    if ( evt.which === 8 && size > 0 ) {
        // backspace
        $this.attr('size', size - 1);
    } else if ( isValidKey ) {
        // all other keystrokes
        $this.attr('size', size + 1);
    }
});

http://jsfiddle.net/Vu9ZT/