HTML-Texteingabefeld während der Eingabe wachsen lassen?

Ich kann die anfängliche Texteingabegröße in CSS wie folgt einstellen:

width: 50px;

Aber ich möchte, dass es wächst, wenn ich tippe, bis es zum Beispiel 200px erreicht. Kann dies in reinem CSS, HTML, vorzugsweise ohne Javascript erfolgen?

Veröffentlichen Sie natürlich auch Ihre js / jquery-Lösungen, aber wenn dies ohne sie möglich ist, ist das großartig.

Mein Versuch hier:

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

Hier ist ein Beispiel, bei dem nur CSS und Inhalte bearbeitet werden können :

jsFiddle Beispiel

CSS

span 
{
    border: solid 1px black;
}
div 
{
    max-width: 200px;   
}

HTML

<div>
    <span contenteditable="true">sdfsd</span>
</div>

Ich habe das gerade für dich geschrieben, ich hoffe es gefällt dir :) Keine Garantie, dass es browserübergreifend ist, aber ich denke es ist :)

(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

Wie wäre es mit einer programmgesteuerten Änderung des Größenattributs für die Eingabe?

Semantisch (imo) ist diese Lösung besser als die akzeptierte Lösung, da sie weiterhin Eingabefelder für Benutzereingaben verwendet, aber ein wenig jQuery einführt. Soundcloud macht etwas Ähnliches für ihre Kennzeichnung.

<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/

Wenn Sie den Bereich so einstellen, dass Folgendes angezeigt wird: Inline-Block, automatische horizontale und vertikale Größenänderung funktioniert sehr gut:

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

Ein paar Dinge fallen mir ein:

Verwenden Sie einen onkeydownHandler in Ihrem Textfeld, messen Sie den Text * und erhöhen Sie die Größe des Textfelds entsprechend.

Fügen Sie :focusIhrem Textfeld eine CSS-Klasse mit einer größeren Breite hinzu. Dann wird Ihre Box größer, wenn Sie fokussiert sind. Das ist nicht genau das, wonach Sie fragen, aber ähnlich.

* Es ist nicht einfach, Text in Javascript zu messen. Schauen Sie sich diese Frage für einige Ideen an.

Von: Gibt es ein jQuery-Autogrow-Plugin für Textfelder?

Eine Demo finden Sie hier: http://jsbin.com/ahaxe

Das Plugin:

(function($){

    $.fn.autoGrowInput = function(o) {

        o = $.extend({
            maxWidth: 1000,
            minWidth: 0,
            comfortZone: 70
        }, o);

        this.filter('input:text').each(function(){

            var minWidth = o.minWidth || $(this).width(),
                val = '',
                input = $(this),
                testSubject = $('<tester/>').css({
                    position: 'absolute',
                    top: -9999,
                    left: -9999,
                    width: 'auto',
                    fontSize: input.css('fontSize'),
                    fontFamily: input.css('fontFamily'),
                    fontWeight: input.css('fontWeight'),
                    letterSpacing: input.css('letterSpacing'),
                    whiteSpace: 'nowrap'
                }),
                check = function() {

                    if (val === (val = input.val())) {return;}

                    // Enter new content into testSubject
                    var escaped = val.replace(/&/g, '&amp;').replace(/\s/g,'&nbsp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                    testSubject.html(escaped);

                    // Calculate new width + whether to change
                    var testerWidth = testSubject.width(),
                        newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
                        currentWidth = input.width(),
                        isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
                                             || (newWidth > minWidth && newWidth < o.maxWidth);

                    // Animate width
                    if (isValidWidthChange) {
                        input.width(newWidth);
                    }

                };

            testSubject.insertAfter(input);

            $(this).bind('keyup keydown blur update', check);

        });

        return this;

    };

})(jQuery);

Hier können Sie so etwas ausprobieren

BEARBEITEN: ÜBERARBEITETES BEISPIEL (eine neue Lösung hinzugefügt) http://jsfiddle.net/jszjz/10/

Code-Erklärung

var jqThis = $('#adjinput'), //object of the input field in jQuery
    fontSize = parseInt( jqThis.css('font-size') ) / 2, //its font-size
    //its min Width (the box won't become smaller than this
    minWidth= parseInt( jqThis.css('min-width') ), 
    //its maxWidth (the box won't become bigger than this)
    maxWidth= parseInt( jqThis.css('max-width') );

jqThis.bind('keydown', function(e){ //on key down
   var newVal = (this.value.length * fontSize); //compute the new width

   if( newVal  > minWidth && newVal <= maxWidth ) //check to see if it is within Min and Max
       this.style.width = newVal + 'px'; //update the value.
});

und das CSS ist auch ziemlich einfach

#adjinput{
    max-width:200px !important;
    width:40px;
    min-width:40px;
    font-size:11px;
}

BEARBEITEN: Eine andere Lösung besteht darin, den Benutzer eingeben zu lassen, was er will, und bei Unschärfe (Fokus heraus) die Zeichenfolge (in derselben Schriftgröße) in ein Div zu legen - die Breite des Div zu zählen - und dann mit einem netten Animieren mit einem Cool zu animieren Lockerungseffekt Aktualisieren Sie die Breite der Eingabefelder. Der einzige Nachteil ist, dass das Eingabefeld "klein" bleibt, während der Benutzer tippt. Oder Sie können eine Zeitüberschreitung hinzufügen :) Sie können eine solche Lösung auch auf der obigen Geige überprüfen!

Ich weiß, dass dies ein ernsthaft alter Beitrag ist - aber meine Antwort könnte trotzdem für andere nützlich sein, also geht es weiter. Ich habe festgestellt, dass das Div automatisch skaliert, wenn meine CSS-Stildefinition für das inhaltsbearbeitbare Div eine Mindesthöhe von 200 anstelle einer Höhe von 200 hat.

Wenn Sie nur in wachsenden interessiert sind, können Sie das Update widthauf scrollWidth, sobald der Inhalt des inputElements ändert.

document.querySelectorAll('input[type="text"]').forEach(function(node) {
  node.onchange = node.oninput = function() {
    node.style.width = node.scrollWidth+'px';
  };
});

Dies wird das Element jedoch nicht verkleinern.

Welchen Ansatz Sie verwenden, hängt natürlich davon ab, was Ihr Endziel ist. Wenn Sie die Ergebnisse mit einem Formular senden möchten, bedeutet die Verwendung nativer Formularelemente, dass Sie zum Senden kein Skript verwenden müssen. Wenn die Skripterstellung deaktiviert ist, funktioniert der Fallback auch ohne die ausgefallenen Grow-Shrink-Effekte. Wenn Sie den Klartext aus einem inhaltsbearbeitbaren Element herausholen möchten , können Sie jederzeit auch Skripte wie node.textContent verwenden , um das HTML zu entfernen , das die Browser in die Benutzereingabe einfügen.

Diese Version verwendet native Formularelemente mit geringfügigen Verbesserungen in einigen der vorherigen Beiträge.

Dadurch kann auch der Inhalt verkleinert werden.

Verwenden Sie dies in Kombination mit CSS für eine bessere Kontrolle.

<html>

<textarea></textarea>
<br>
<input type="text">


<style>

textarea {
  width: 300px;
  min-height: 100px;
}

input {
  min-width: 300px;
}


<script>

document.querySelectorAll('input[type="text"]').forEach(function(node) {
  var minWidth = parseInt(getComputedStyle(node).minWidth) || node.clientWidth;
  node.style.overflowX = 'auto'; // 'hidden'
  node.onchange = node.oninput = function() {
    node.style.width = minWidth + 'px';
    node.style.width = node.scrollWidth + 'px';
  };
});

Sie können etwas Ähnliches mit <textarea> -Elementen verwenden

document.querySelectorAll('textarea').forEach(function(node) {
  var minHeight = parseInt(getComputedStyle(node).minHeight) || node.clientHeight;
  node.style.overflowY = 'auto'; // 'hidden'
  node.onchange = node.oninput = function() {
    node.style.height = minHeight + 'px';
    node.style.height = node.scrollHeight + 'px';
  };
});

Dies flackert in Chrome nicht. Die Ergebnisse können in anderen Browsern variieren. Testen Sie daher.

Hier ist eine Methode, die für mich funktioniert hat. Wenn Sie in das Feld eingeben, wird dieser Text in den ausgeblendeten Bereich eingefügt, erhält dann seine neue Breite und wendet ihn auf das Eingabefeld an. Es wächst und schrumpft mit Ihrer Eingabe, wobei ein Schutz gegen die Eingabe praktisch verschwindet, wenn Sie alle Eingaben löschen. In Chrome getestet. (BEARBEITEN: funktioniert zum Zeitpunkt dieser Bearbeitung in Safari, Firefox und Edge)

function travel_keyup(e)
{
    if (e.target.value.length == 0) return;
    var oSpan=document.querySelector('#menu-enter-travel span');
    oSpan.textContent=e.target.value;
    match_span(e.target, oSpan);
}
function travel_keydown(e)
{
    if (e.key.length == 1)
    {
        if (e.target.maxLength == e.target.value.length) return;
        var oSpan=document.querySelector('#menu-enter-travel span');
        oSpan.textContent=e.target.value + '' + e.key;
        match_span(e.target, oSpan);
    }
}
function match_span(oInput, oSpan)
{
    oInput.style.width=oSpan.getBoundingClientRect().width + 'px';
}

window.addEventListener('load', function()
{
    var oInput=document.querySelector('#menu-enter-travel input');
    oInput.addEventListener('keyup', travel_keyup);
    oInput.addEventListener('keydown', travel_keydown);

    match_span(oInput, document.querySelector('#menu-enter-travel span'));
});

#menu-enter-travel input
{
	width: 8px;
}
#menu-enter-travel span
{
	visibility: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
}

<div id="menu-enter-travel">
<input type="text" pattern="^[0-9]{1,4}$" maxlength="4">KM
<span>9</span>
</div>

Wenn Sie die ch-Messung (monospaced) verwenden dürfen, hat sie das, was ich versucht habe, vollständig gelöst.

onChange(e => {
    e.target.style.width = `${e.target.length}ch`;
})

Dies war genau das, was ich brauchte, aber ich bin mir nicht sicher, ob es für Schriftfamilien mit dynamischer Breite funktioniert.