it-swarm.com.de

hTML-Texteingabefeld bei der Eingabe vergrößern?

Ich kann die anfängliche Texteingabegröße wie folgt in css festlegen:

width: 50px;

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

Poste natürlich auch deine js/jquery-Lösungen, aber wenn das ohne sie machbar ist - das ist großartig.

mein Versuch hier:

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

61
Stann

Hier ist ein Beispiel nur mit CSS und Content Editable

jsFiddle-Beispiel

CSS

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

HTML

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

Ich habe das gerade für Sie geschrieben, ich hoffe, es gefällt euch :)

(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, "&amp;")
                                       .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

29
Paulpro

Wie wäre es, das Größenattribut der Eingabe programmgesteuert zu ändern?

Semantisch (imo) ist diese Lösung besser als die akzeptierte Lösung, da sie immer noch Eingabefelder für Benutzereingaben verwendet, jedoch etwas jQuery einführt. Soundcloud macht etwas Ähnliches für das Tagging.

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

6
muffs

From: Gibt es ein jQuery-Plug-In 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);
3
cmpolis

Wenn Sie den Bereich für die Anzeige von Inline-Block einstellen, funktioniert die automatische horizontale und vertikale Größenänderung sehr gut:

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

3
lastmjs

Ein paar Dinge fallen mir ein: 

Verwenden Sie einen onkeydown-Handler in Ihrem Textfeld, messen Sie den Text * und vergrößern Sie die Textfeldgröße entsprechend.

Hängen Sie eine :focus css-Klasse mit einer größeren Breite an Ihr Textfeld an. Dann wird Ihre Box größer, wenn Sie fokussiert sind. Das ist nicht genau das, wonach Sie verlangen, aber ähnlich.

* Es ist nicht einfach, Text in Javascript zu messen. Check out diese Frage für ein paar Ideen. 

2
Seth

Hier kann man so etwas ausprobieren

BEARBEITEN: REVISIERTES 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 die css ist auch ziemlich unkompliziert

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

BEARBEITEN: Eine andere Lösung besteht darin, dass der Benutzer das eingegeben hat, was er möchte, und bei Unschärfe (Fokus heraus) den String (in der gleichen Schriftgröße) in ein div einordnen - die Breite des div zählen - und dann mit einem Nice-Animator mit einem coolen Beschleunigungseffekt aktualisiert die Breite der Eingabefelder. Der einzige Nachteil ist, dass das Eingabefeld "klein" bleibt, während der Benutzer eingibt. Oder Sie können ein Timeout hinzufügen:) Sie können eine solche Lösung auch oben auf der Geige überprüfen!

2
Pantelis

Ich weiß, dass dies ein ernsthaft alter Beitrag ist - Aber meine Antwort könnte ohnehin für andere nützlich sein, also hier… __ eine Höhe von 200, dann skaliert das Div automatisch.

1
b0rgBart3

Welcher Ansatz Sie verwenden, hängt natürlich von Ihrem Endziel ab. Wenn Sie die Ergebnisse mit einem Formular senden möchten, müssen Sie bei der Verwendung nativer Formularelemente zum Senden keine Skripts verwenden. Wenn das Scripting deaktiviert ist, funktioniert der Fallback auch ohne die ausgefallenen Schrumpfeffekte. Wenn Sie den Klartext aus einem contenteditable -Element abrufen möchten, können Sie auch Skripts wie node.textContent verwenden, um die HTML-Datei zu entfernen, die die Browser in die Benutzereingabe einfügen.

Diese Version verwendet native Formularelemente mit einigen Verfeinerungen in einigen der vorherigen Beiträge.

Dadurch kann der Inhalt auch schrumpfen.

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 das also.

1
Kevin Douglas

Wenn Sie nur am Wachsen interessiert sind, können Sie die Variable width auf scrollWidth aktualisieren, wenn sich der Inhalt des Elements input ändert.

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

Das Element wird jedoch nicht geschrumpft.

0
ceving

Hier ist eine Methode, die bei mir 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 der Schutz vor der Eingabe praktisch verschwindet, wenn Sie alle Eingaben löschen. In Chrome getestet. (BEARBEITEN: funktioniert in Safari, Firefox und Edge zum Zeitpunkt dieser Bearbeitung)

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>
0
Aaron Mason