it-swarm.com.de

Passen Sie die Breite des Eingabefelds an die Eingabe an

<html>
  <head>
  </head>
  <body>
    <input type="text" value="1" style="min-width:1px;" />
  </body>
</html>

Dies ist mein Code und es funktioniert nicht. Gibt es eine andere Möglichkeit in HTML, JavaScript, PHP oder CSS, um die minimale Breite festzulegen?

Ich möchte ein Texteingabefeld mit einer sich dynamisch ändernden Breite, damit das Eingabefeld seinen Inhalt umfließt. Jede Eingabe hat eine eingebaute Auffüllung von 2em, das ist das Problem und das zweite Problem ist, dass min-width überhaupt nicht für die Eingabe funktioniert.

Wenn ich die Breite mehr als erforderlich setze, als das gesamte Programm unordentlich ist, brauche ich die Breite von 1px, mehr nur, wenn es benötigt wird.

125
Kerc

Es scheint, als würden Sie erwarten, dass der Stil dynamisch auf die Breite des Textfelds angewendet wird, basierend auf dem Inhalt des Textfelds. In diesem Fall benötigen Sie einige js, um den Textfeldinhalt zu ändern, der sich wie this ändert:

<input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';">

Hinweis: Diese Lösung funktioniert nur, wenn jedes Zeichen genau 8px breit ist.

73
Tahbaza

Um die Breite der aktuellen Eingabe zu berechnen, müssen Sie sie in ein temporäres span-Element einbetten, dieses Objekt an das DOM anhängen, die berechnete Breite (in Pixel) mithilfe der scrollWidth-Eigenschaft abrufen und die span erneut entfernen. Natürlich müssen Sie sicherstellen, dass in der Variablen input und im Element span die gleiche Schriftfamilie, Schriftgröße usw. verwendet wird. Deshalb habe ich ihnen dieselbe Klasse zugewiesen.

Ich habe die Funktion an das keyup-Ereignis angehängt, da bei keypress das Eingabezeichen noch nicht zur Eingabe value hinzugefügt wird, so dass die falsche Breite entsteht. Leider weiß ich nicht, wie ich das Scrollen des Eingabefeldes loswerden kann (wenn Sie Zeichen am Ende des Felds hinzufügen); es scrollt, weil das Zeichen hinzugefügt und angezeigt wird, bevor adjustWidthOfInput() aufgerufen wird. Und wie gesagt, ich kann das nicht andersherum machen, denn dann haben Sie den Wert des Eingabefeldes before das gedrückte Zeichen wird eingefügt. Ich werde später versuchen, dieses Problem zu lösen.

Übrigens, ich habe das nur in Firefox (3.6.8) getestet, aber Sie bekommen den Punkt, hoffe ich.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Get/set width of &lt;input&gt;</title>
    <style>
      body {
        background: #666;
      }

      .input-element {
        border: 0;
        padding: 2px;
        background: #fff;
        font: 12pt sans-serif;
      }

      .tmp-element {
        visibility: hidden;
        white-space: pre;
      }
    </style>
  </head>
  <body>
    <input id="theInput" type="text" class="input-element" value="1">
    <script>
      var inputEl = document.getElementById("theInput");

      function getWidthOfInput() {
        var tmp = document.createElement("span");
        tmp.className = "input-element tmp-element";
        tmp.innerHTML = inputEl.value.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
        document.body.appendChild(tmp);
        var theWidth = tmp.getBoundingClientRect().width;
        document.body.removeChild(tmp);
        return theWidth;
      }

      function adjustWidthOfInput() {
        inputEl.style.width = getWidthOfInput() + "px";
      }

      adjustWidthOfInput();
      inputEl.onkeyup = adjustWidthOfInput;
    </script>
  </body>
</html>
58
Marcel Korpel

In modernen Browser-Versionen ist auch die CSS-Einheit ch verfügbar. Nach meinem Verständnis ist dies eine font-unabhängige Einheit, wobei 1ch der Breite des Zeichens 0 (null) in einer bestimmten Schriftart entspricht.

Daher könnte etwas so einfaches wie das Folgende als Größenänderungsfunktion verwendet werden:

var input = document.querySelector('input'); // get the input element
input.addEventListener('input', resizeInput); // bind the "resizeInput" callback on "input" event
resizeInput.call(input); // immediately call the function

function resizeInput() {
  this.style.width = this.value.length + "ch";
}
input{ font-size:1.3em; padding:.5em; }
<input>

In diesem Beispiel würde "elem" auf die Länge des Werts + 2 zusätzliche Zeichen geändert.

47
Jani Jalkala

Hier ist eine Modifikation von Lyths Antwort, die berücksichtigt:

  • Streichung 
  • Initialisierung
  • Platzhalter

Es erlaubt auch eine beliebige Anzahl von Eingabefeldern! Um es in Aktion zu sehen: http://jsfiddle.net/4Qsa8/

Skript:

$(document).ready(function () {
    var $inputs = $('.resizing-input');

    // Resize based on text if text.length > 0
    // Otherwise resize based on the placeholder
    function resizeForText(text) {
        var $this = $(this);
        if (!text.trim()) {
            text = $this.attr('placeholder').trim();
        }
        var $span = $this.parent().find('span');
        $span.text(text);
        var $inputSize = $span.width();
        $this.css("width", $inputSize);
    }

    $inputs.find('input').keypress(function (e) {
        if (e.which && e.charCode) {
            var c = String.fromCharCode(e.keyCode | e.charCode);
            var $this = $(this);
            resizeForText.call($this, $this.val() + c);
        }
    });

    // Backspace event only fires for keyup
    $inputs.find('input').keyup(function (e) { 
        if (e.keyCode === 8 || e.keyCode === 46) {
            resizeForText.call($(this), $(this).val());
        }
    });

    $inputs.find('input').each(function () {
        var $this = $(this);
        resizeForText.call($this, $this.val())
    });
});

Stil: 

.resizing-input input, .resizing-input span {
    font-size: 12px;
    font-family: Sans-serif;
    white-space: pre;
    padding: 5px;
}

HTML:

<div class="resizing-input">
    <input type="text" placeholder="placeholder"/>
    <span  style="display:none"></span>
</div>

$(document).ready(function() {
  var $inputs = $('.resizing-input');

  // Resize based on text if text.length > 0
  // Otherwise resize based on the placeholder
  function resizeForText(text) {
    var $this = $(this);
    if (!text.trim()) {
      text = $this.attr('placeholder').trim();
    }
    var $span = $this.parent().find('span');
    $span.text(text);
    var $inputSize = $span.width();
    $this.css("width", $inputSize);
  }

  $inputs.find('input').keypress(function(e) {
    if (e.which && e.charCode) {
      var c = String.fromCharCode(e.keyCode | e.charCode);
      var $this = $(this);
      resizeForText.call($this, $this.val() + c);
    }
  });

  // Backspace event only fires for keyup
  $inputs.find('input').keyup(function(e) {
    if (e.keyCode === 8 || e.keyCode === 46) {
      resizeForText.call($(this), $(this).val());
    }
  });

  $inputs.find('input').each(function() {
    var $this = $(this);
    resizeForText.call($this, $this.val())
  });
});
.resizing-input input,
.resizing-input span {
  font-size: 12px;
  font-family: Sans-serif;
  white-space: pre;
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="resizing-input">
  First:
  <input type="text" placeholder="placeholder" />
  <span style="display:none"></span>
</div>
<br>

25
Michael

FÜR EINEN NICER LOOK & FÜHLEN

Sie sollten das Ereignis jQuery keypress () in Kombination mit String.fromCharCode (e.which) verwenden, um das gedrückte Zeichen abzurufen. Daher können Sie berechnen, wie breit wird sein. Warum? Weil es viel sexy aussehen wird :)

Hier ist ein jsfiddle, das im Vergleich zu Lösungen, die das keyup -Ereignis verwenden, zu einem Verhalten von Nice führt: http://jsfiddle.net/G4FKW/3/

Nachfolgend finden Sie eine Vanilla JS, die das input -Ereignis eines <input>-Elements abhört und ein span-Geschwister mit demselben Textwert festlegt, um es zu messen.

document.querySelector('input').addEventListener('input', onInput)

function onInput(){
    var spanElm = this.nextElementSibling;
    spanElm.textContent = this.value; // the hidden span takes the value of the input; 
    this.style.width = spanElm.offsetWidth + 'px'; // apply width of the span to the input
};
/* it's important the input and its span have same styling */
input, .measure {
    padding: 5px;
    font-size: 2.3rem;
    font-family: Sans-serif;
    white-space: pre; /* white-spaces will work effectively */
}

.measure{  
  position: absolute;
  left: -9999px;
  top: -9999px;
}
<input type="text" />
<span class='measure'></span>

15
Lyth

Hier ist eine Lösung ohne Monospaced Font benötigt, mit nur sehr kleinteiligem Code von Javascript , brauchen keine berechneten Stile , und sogar Unterstützung ime , Unterstützung RTL-Texte .

// copy the text from input to the span
    $(function () {
      $('.input').on('input', function () { $('.text').text($('.input').val()); });
    });
    * {
      box-sizing: border-box;
    }
    
    .container {
      display: inline-block;
      position: relative;
    }
    
    .input,
    .text {
      margin: 0;
      padding: 2px 10px;
      font-size: 24px;
      line-height: 32px;
      border: 1px solid #ccc;
      box-radius: 3px;
      height: 36px;
      font: 20px/20px sans-serif;
      /* font: they should use same font; */
    }

    .text {
      padding-right: 20px;
      display: inline-block;
      visibility: hidden;
      white-space: pre;
    }
    
    .input {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
    }
    
<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>

<div class="container">
  <span class="text">
    some text
  </span>
  <input class="input" value="some text" />
</div>

Verwenden Sie span.text, um die Breite des Textes anzupassen, und lassen Sie die Eingabe mit position: absolute in den Container ein. Kopiere den Wert der Eingabe bei jeder Änderung in die Variable span (du kannst diesen Code leicht in Vanilla js ändern). Die Eingabe "passt" also einfach an die Größe des Inhalts.

11
tsh

Sie können die Breite einer Eingabe auch mit dem Attribut size festlegen. Die Größe einer Eingabe bestimmt die Breite in Zeichen.

Ein Eingang könnte seine Größe dynamisch anpassen, indem er auf wichtige Ereignisse wartet.

Zum Beispiel

$("input[type='text']").bind('keyup', function () {
    $(this).attr("size", $(this).val().length );
});

JsFiddle hier

8
brendan

Hier ist eine alternative Möglichkeit, dieses Problem mithilfe einer DIV und der Eigenschaft 'contenteditable' zu lösen:

HTML:

<div contenteditable = "true" class = "fluidInput" data-placeholder = ""></div>

CSS: (um dem DIV einige Dimensionen zu geben und es einfacher zu sehen)

.fluidInput {

    display         : inline-block;
    vertical-align  : top;

    min-width       : 1em;
    height          : 1.5em;

    font-family     : Arial, Helvetica, sans-serif;
    font-size       : 0.8em;
    line-height     : 1.5em;

    padding         : 0px 2px 0px 2px;
    border          : 1px solid #aaa;
    cursor          : text;
}


.fluidInput * {

    display         : inline;

}


.fluidInput br  {

    display         : none;

}


.fluidInput:empty:before {

    content         : attr(data-placeholder);
    color           : #ccc;

}

Hinweis: Wenn Sie planen, dieses Element innerhalb eines FORM-Elements zu verwenden, das Sie einreichen möchten, müssen Sie Javascript/jQuery verwenden, um das Submit-Ereignis abzufangen, damit Sie den 'Wert' (bzw. .innerHTML bzw. .html()) des DIV.

7
logic8

Sie könnten etwas tun wie das

// HTML
<input id="input" type="text" style="width:3px" />
// jQuery
$(function(){
  $('#input').keyup(function(){
    $('<span id="width">').append( $(this).val() ).appendTo('body');
    $(this).width( $('#width').width() + 2 );
    $('#width').remove();
  });
});

Das

Das

7
Ties

Hier sind ein einfaches JS- und ein jQuery-Plugin, das ich geschrieben habe und das die Größenänderung eines Eingabeelements mithilfe einer Zeichenfläche und der Schriftgröße/Familie übernimmt, um die tatsächliche Stringlänge beim Rendern zu bestimmen. (funktioniert nur in> IE9, Chrome, Safari, Firefox, Opera und den meisten anderen wichtigen Browsern, die das Canvas-Element implementiert haben).

PlainJS:

function autoSize(input, o) {
    o || (o = {});
    o.on || (o.on = 'keyup');

    var canvas = document.createElement('canvas');
    canvas.setAttribute('style', 'position: absolute; left: -9999px');
    document.body.appendChild(canvas);

    var ctx = canvas.getContext('2d');

    input.addEventListener(o.on, function () {
        ctx.font = getComputedStyle(this,null).getPropertyValue('font');
        this.style.width = ctx.measureText(this.value + '  ').width + 'px';
    });
}

//Usage
autoSize(document.getElementById('my-input'));

jQuery Plugin:

$.fn.autoSize = function(o) {
  o = $.extend({}, {
    on: 'keyup'
  }, o);

  var $canvas = $('<canvas/>').css({position: 'absolute', left: -9999});
  $('body').append($canvas);

  var ctx = $canvas[0].getContext('2d');

  return this.on(o.on, function(){
    var $this = $(this);
    ctx.font = $this.css('font');
    $this.width(ctx.measureText($this.val()).width + 'px');
  })
}

//Usage:
$('#my-input').autoSize();

Hinweis: Dies gilt nicht für Textumwandlungen, Zeilenabstände und Buchstabenabstände und möglicherweise auch für andere Eigenschaften zur Änderung der Textgröße. Um den Eigenschaftssatz "text-transform" zu behandeln und den Textwert an diese Eigenschaft anzupassen. Die anderen sind wahrscheinlich ziemlich unkompliziert. Ich werde implementieren, wenn dies anfängt, an Zugkraft zu gewinnen ...

4
newms87

Dies ist eine winkelspezifische Antwort, die jedoch für mich funktioniert hat und hinsichtlich ihrer Einfachheit und Benutzerfreundlichkeit sehr befriedigend war:

<input [style.width.ch]="value.length" [(ngModel)]="value" />

Es wird automatisch über die Zeicheneinheiten in Janis Antwort aktualisiert.

4

Es ist erwähnenswert, dass eine ansehnliche Größenänderung vorgenommen werden kann, wenn die Schrift nicht durchbrochen ist. Daher können wir die Größe des input -Elements mithilfe der ch -Einheit perfekt ändern.

Auch bei diesem Ansatz können wir die Breite des Feldes aktualisieren, indem wir einfach eine CSS-Variable ( benutzerdefinierte Eigenschaft) aktivieren input event und wir sollten uns auch um bereits ausgefüllte Eingaben zum DOMContentLoaded event kümmern

Codepen-Demo


Markup

<input type="text" value="space mono font" class="selfadapt" />

[~ # ~] CSS [~ # ~]

:root { --size: 0; }

.selfadapt {
   padding: 5px;
   min-width: 10ch;
   font-family: "space mono";
   font-size: 1.5rem;
   width: calc(var(--size) * 1ch);
}

Als Root-Variable setzen wir --size: 0: Diese Variable enthält die Länge der Eingabe und wird mit 1ch Im Ausdruck calc() multipliziert. Standardmäßig könnten wir auch eine minimale Breite einstellen, z. 10ch

Der Javascript-Teil liest die Länge des eingefügten Wertes und aktualisiert die Variable --size:

[~ # ~] js [~ # ~]

let input = document.querySelector('.selfadapt');
let root  = document.documentElement.style;

/* on input event auto resize the field */
input.addEventListener('input', function() {
   root.setProperty('--size', this.value.length );
});

/* resize the field if it is pre-populated */
document.addEventListener("DOMContentLoaded", function() {
   root.setProperty('--size', input.value.length);
});

dies funktioniert natürlich auch dann, wenn Sie keine monospaced Schriftart verwenden. In diesem Fall müssen Sie jedoch die calc() -Formel ändern, indem Sie die Variable --size mit einem anderen Wert multiplizieren (der streng ist) abhängig von font-family und font-size) verschieden von 1ch.

3
fcalderan

Mit den eingebauten ng-style-Direktiven können Sie es in eckigen Js noch einfacher machen.

In Ihrer HTML:

  <input ng-style="inputStyle(testdata)" ng-model="testdata" />

In Ihrem Controller:

 $scope.testdata = "whatever";

 $scope.inputStyle = function(str) {
    var charWidth = 7;
    return  {"width": (str.length +1) * charWidth + "px" };
    };

In Ihrem CSS:

input { font-family:monospace; font-size:12px; }

Passen Sie die Zeichenbreite an die Breite Ihrer Schrift an. Es scheint 7 bei einer Schriftgröße von 12px zu sein;

2
michieljoris

Wenn Sie Bootstrap verwenden, ist dies sehr einfach möglich:

<div contenteditable="true" class="form-control" style="display: inline"></div>

Sie müssen nur den Inhalt von div abrufen und in eine verborgene Eingabe einfügen, bevor Sie das Formular absenden.

1
Alexey Kosov

Ich denke, Sie interpretieren die min-width CSS-Eigenschaft falsch. min-width wird im Allgemeinen verwendet, um eine minimale DOM-Breite in einem Fluid-Layout zu definieren, z.

input {
  width: 30%;
  min-width: 200px;
}

Dies würde das Eingabeelement auf eine minimale Breite von 200 Pixel setzen. In diesem Zusammenhang steht "px" für "Pixel".

Wenn Sie nun sicherstellen möchten, dass das Eingabefeld mindestens ein Zeichen enthält, wenn ein Benutzer es abschickt, müssen Sie eine Formularvalidierung mit JavaScript und PHP durchführen. Wenn Sie dies tatsächlich tun, werde ich diese Antwort bearbeiten und mein Bestes tun, um Ihnen zu helfen.

1
peterjmag

Lyths Antwort hat mir sehr gefallen, wollte es aber auch wirklich:

  1. Rücktaste behandeln und löschen
  2. Sie müssen kein benachbartes Tag manuell hinzufügen.
  3. Erzwinge eine minimale Breite.
  4. Wird automatisch auf Elemente mit einer bestimmten Klasse angewendet

Ich passte seine JSFiddle an und kam mit this . Eine Verbesserung, die in dieser Geige nicht vorhanden ist, wäre die Verwendung des CSS-Parsers " jQuery ", um tatsächlich die ursprüngliche Breite der Regel "Regelbox" zu lesen und diese als minWidth zu verwenden. Richtig, ich benutze einfach ein Attribut auf der, was für eine kompakte Demo sorgt, aber nicht ideal ist. da für jede Eingabe ein zusätzliches Attribut erforderlich ist. Möglicherweise möchten Sie auch nur die minWidth als 100 in JavaScript setzen.

HTML:

<div id='applicationHost'>
<div>Name:   <input class='textbox-autosize' data-min-width='100' type="text" /></div>
<div>Email:  <input class='textbox-autosize' data-min-width='100' type="email" /></div>
<div>Points: <input class='textbox-autosize' data-min-width='100' type="number" /></div>
</div>

CSS:

#applicationHost {
    font-family: courier;
    white-space: pre;
}

input.textbox-autosize, span.invisible-autosize-helper {
    padding:0;
    font-size:12px;
    font-family:Sans-serif; 
    white-space:pre;
}
input.textbox-autosize {
    width: 100px; /* Initial width of textboxes */
}

/*
In order for the measurements to work out, your input and the invisible
span need to have the same styling.
*/

JavaScript:

$('#applicationHost').on('keyup', '.textbox-autosize', function(e) {
    // Add an arbitary buffer of 15 pixels.
    var whitespaceBuffer = 15;
    var je = $(this);
    var minWidth = parseInt(je.attr('data-min-width'));
    var newVal = je.val();
    var sizingSpanClass = 'invisible-autosize-helper';
    var $span = je.siblings('span.' + sizingSpanClass).first();
    // If this element hasn't been created yet, we'll create it now.
    if ($span.length === 0) {
        $span = $('<span/>', {
            'class': sizingSpanClass,
            'style': 'display: none;'
        });
        je.parent().append($span);
    }
    $span = je.siblings('span').first();
    $span.text(newVal) ; // the hidden span takes 
    // the value of the input
    $inputSize = $span.width();
    $inputSize += whitespaceBuffer;
    if($inputSize > minWidth)
        je.css("width", $inputSize) ; // apply width of the span to the input
    else
        je.css("width", minWidth) ; // Ensure we're at the min width
});
1
Josh

Fügen Sie einfach weitere Antworten hinzu. 

Ich habe festgestellt, dass das Eingabefeld heutzutage in einigen Browsern eine ScrollWidth hat. Was bedeutet: 

this.style.width = this.scrollWidth + 'px';

sollte gut funktionieren. getestet in chrom, firefox und safari. 

Für die Löschunterstützung können Sie zuerst '= 0' hinzufügen und dann erneut anpassen. 

this.style.width = 0; this.style.width = this.scrollWidth + 'px';
1
guy mograbi

Warum nicht nur css verwenden? 

<div id="wrapper">
  <input onkeyup="keyup(event)">
  <div id="ghost"></div>
</div>

function keyup(e) {
	document.getElementById('ghost').innerText = e.target.value;
}
#wrapper {
  position: relative;
  min-width: 30px;
  display: inline-block;
}

input {
  position: absolute;
  left:0;
  right:0;
  border:1px solid blue;
  width: 100%;
}

#ghost {
  color: transparent;
}
<div id="wrapper">
  <input onkeyup="keyup(event)">
  <div id="ghost"></div>
</div>

wrapper {
  position: relative;
  min-width: 30px;
  border: 1px solid red;
  display: inline-block;
}

input {
  position: absolute;
  left:0;
  right:0;
  width: 100%;
}

#ghost {
  color: transparent;
}

dieser Code wurde von @Iain Todd eingeführt und ich dachte, ich sollte ihn teilen

0
Milad

Ein kugelsicherer, generischer Weg muss:

  1. Berücksichtigen Sie alle möglichen Stile des gemessenen input Elements 
  2. Sie können die Messung auf jeden Eingang anwenden, ohne HTML oder zu ändern 

Codepen Demo

var getInputValueWidth = (function(){
  // https://stackoverflow.com/a/49982135/104380
  function copyNodeStyle(sourceNode, targetNode) {
    var computedStyle = window.getComputedStyle(sourceNode);
    Array.from(computedStyle).forEach(key => targetNode.style.setProperty(key, computedStyle.getPropertyValue(key), computedStyle.getPropertyPriority(key)))
  }
  
  function createInputMeassureElm( inputelm ){
    // create a dummy input element for measurements
    var meassureElm = document.createElement('span');
    // copy the read input's styles to the dummy input
    copyNodeStyle(inputelm, meassureElm);
    
    // set hard-coded styles needed for propper meassuring 
    meassureElm.style.width = 'auto';
    meassureElm.style.position = 'absolute';
    meassureElm.style.left = '-9999px';
    meassureElm.style.top = '-9999px';
    meassureElm.style.whiteSpace = 'pre';
    
    meassureElm.textContent = inputelm.value || '';
    
    // add the meassure element to the body
    document.body.appendChild(meassureElm);
    
    return meassureElm;
  }
  
  return function(){
    return createInputMeassureElm(this).offsetWidth;
  }
})();


// delegated event binding
document.body.addEventListener('input', onInputDelegate)

function onInputDelegate(e){
  if( e.target.classList.contains('autoSize') )
    e.target.style.width = getInputValueWidth.call(e.target) + 'px';
}
input{ 
  font-size:1.3em; 
  padding:5px; 
  margin-bottom: 1em;
}

input.type2{
  font-size: 2.5em;
  letter-spacing: 4px;
  font-style: italic;
}
<input class='autoSize' value="type something">
<br>
<input class='autoSize type2' value="here too">

0
vsync

Basierend auf Michaels Antwort habe ich meine eigene Version mit jQuery erstellt. Ich denke, es ist eine sauberere/kürzere Version der meisten Antworten und scheint die Arbeit zu erledigen.

Ich mache dasselbe wie die meisten Leute hier, indem ich den eingegebenen Text mit einem Span in die Breite schreibe. Dann stelle ich die Breite ein, wenn die Aktionen keyup und blur aufgerufen werden.

Hier ist ein funktionierender codepen . Dieses Codepen zeigt, wie dies mit mehreren Eingabefeldern verwendet werden kann.

HTML-Struktur:

<input type="text" class="plain-field" placeholder="Full Name">
<span style="display: none;"></span>

jQuery:

function resizeInputs($text) {
    var text = $text.val().replace(/\s+/g, ' '),
        placeholder = $text.attr('placeholder'),
        span = $text.next('span');
        span.text(placeholder);
    var width = span.width();

    if(text !== '') {
        span.text(text);
    var width = span.width();
    }

    $text.css('width', width + 5);
};

Die Funktion oben ruft den Eingabewert ab, schneidet die zusätzlichen Leerzeichen ab und setzt den Text in den Bereich, um die Breite zu erhalten. Wenn kein Text vorhanden ist, wird stattdessen der Platzhalter abgerufen und stattdessen in den Bereich eingefügt. Sobald der Text in den Bereich eingegeben wurde, wird die Breite der Eingabe festgelegt. Der + 5 auf der Breite ist, denn ohne dass die Eingabe im Edge-Browser ein kleines bisschen abgeschnitten wird.

$('.plain-field').each(function() {
    var $text = $(this);
    resizeInputs($text);
});

$('.plain-field').on('keyup blur', function() {
    var $text = $(this);
    resizeInputs($text);
});

$('.plain-field').on('blur', function() {
    var $text = $(this).val().replace(/\s+/g, ' ');
    $(this).val($text);
});

Wenn dies verbessert werden kann, lassen Sie es mich wissen, da dies die sauberste Lösung ist, die ich finden könnte.

0
Matthew

Besser ist onvalue:

<input id="txt" type="text" onvalue="this.style.width = ((this.value.length + 1) * 8) + 'px';">

Dazu gehört auch das Einfügen, Ziehen und Ablegen usw.

0

Ich verbringe nur einige Zeit damit, herauszufinden, wie es geht.
Tatsächlich ist der einfachste Weg, den ich gefunden habe, den Eingabewert kurz vor der Eingabe auf den Bereich zu verschieben, wobei die Breite des eingegebenen 1-Symbols beibehalten wird. Ich kann jedoch nicht sicher sein, ob es für Ihre anfängliche Notwendigkeit passt.
Vielleicht etwas mehr Code, aber in der reaktionsbasierten Anwendung ist es eine sehr natürliche Lösung. 

0
freele

Diese Antwort bietet eine der genauesten Methoden zum Abrufen der im Browser verfügbaren Textbreite und ist genauer als die akzeptierte Antwort. Es verwendet das canvas html5-Element und fügt das Element im Gegensatz zu anderen Antworten nicht in das DOM ein und vermeidet so Reflow-Probleme, die durch übermäßiges Hinzufügen von Elementen zum DOM entstehen.

Lesen Sie mehr über das Canvas-Element hier in Bezug auf die Textbreite.

HINWEIS: Gemäß MDN können die Kurzfassungen der getPropertyValue()-Methode, beispielsweise font, unzuverlässig sein. Ich würde empfehlen, die Werte einzeln zu erhalten, um die Kompatibilität zu verbessern. Ich habe es hier nur für Geschwindigkeit verwendet.

/**
 * returns the width of child text of any DOM node as a float
 */
function getTextWidth(el) {
  // uses a cached canvas if available
  var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
  var context = canvas.getContext("2d");
  // get the full font style property
  var font = window.getComputedStyle(el, null).getPropertyValue('font');
  var text = el.value;
  // set the font attr for the canvas text
  context.font = font;
  var textMeasurement = context.measureText(text);
  return textMeasurement.width;
}

var input = document.getElementById('myInput');
// listen for any input on the input field
input.addEventListener('input', function(e) {
  var width = Math.floor(getTextWidth(e.target));
  // add 10 px to pad the input.
  var widthInPx = (width + 10) + "px";
  e.target.style.width = widthInPx;
}, false);
#myInput {
  font: normal normal 400 normal 18px / normal Roboto, sans-serif;
  min-width: 40px;
}
<input id="myInput" />

0
Matthew Brent

Hier sind meine 2 Cent . Erstellen Sie ein leeres unsichtbares Div. Füllen Sie es mit dem Eingabeinhalt und geben Sie die Breite wieder in das Eingabefeld ein. Passen Sie die Textstile zwischen den einzelnen Kästchen an.

$(".answers_number").keyup(function(){
    $( "#number_box" ).html( $( this ).val() );
    $( this ).animate({
        width: $( "#number_box" ).width()+20
        }, 300, function() {
    });
});
#number_box {
   position: absolute;
   visibility: hidden;
   height: auto;
   width: auto;
   white-space: nowrap;
   padding:0 4px;
   /*Your font styles to match input*/
   font-family:Arial;
   font-size: 30px; 
}
    
.answers_number {
   font-size: 30px; 
   font-family:Arial;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" class="answers_number" />
<div id="number_box">
</div>

0
Thomas Byy