C'è un modo per scalare la larghezza di un <input type="text">alla larghezza del valore effettivo?

input {
  display: block;
  margin: 20px;
  width: auto;
}

<input type="text" value="I've had enough of these damn snakes, on this damn plane!" />

<input type="text" value="me too" />

Puoi farlo nel modo più semplice impostando l' sizeattributo sulla lunghezza del contenuto di input:

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

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

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

Questo sembra aggiungere un po 'di riempimento a destra che sospetto dipenda dal browser. Se vuoi che sia davvero stretto all'input, potresti usare una tecnica come quella che descrivo in questa risposta correlata , usando jQuery per calcolare la dimensione in pixel del tuo testo.

UNA SOLUZIONE SEMPLICE MA PIXEL PERFETTA

Ho visto diversi modi per farlo, ma il calcolo della larghezza dei caratteri non è sempre accurato al 100%, è solo una stima.

Sono riuscito a creare un modo pixel perfetto per regolare la larghezza di input avendo un segnaposto nascosto da cui misurare.

jQuery (consigliato)

$(function(){
  $('#hide').text($('#txt').val());
  $('#txt').width($('#hide').width());
}).on('input', function () {
  $('#hide').text($('#txt').val());
  $('#txt').width($('#hide').width());
});

body,
#txt,
#hide{
  font:inherit;
  margin:0;
  padding:0;
}
#txt{
  border:none;
  color:#888;
  min-width:10px;
}
#hide{
  display:none;
  white-space:pre;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Lorem ipsum 
  <span id="hide"></span><input id="txt" type="text" value="type here ...">
  egestas arcu.
</p>

JavaScript puro

Non sono stato in grado di determinare come jQuery calcola la larghezza degli elementi nascosti, quindi è stato necessario un leggero aggiustamento a CSS per soddisfare questa soluzione.

var hide = document.getElementById('hide');
var txt = document.getElementById('txt');
resize();
txt.addEventListener("input", resize);

function resize() {
  hide.textContent = txt.value;
  txt.style.width = hide.offsetWidth + "px";
}

body,
#txt,
#hide {
  font: inherit;
  margin: 0;
  padding: 0;
}

#txt {
  border: none;
  color: #888;
  min-width: 10px;
}

#hide {
  position: absolute;
  height: 0;
  overflow: hidden;
  white-space: pre;
}

<p>Lorem ipsum
  <span id="hide"></span><input id="txt" type="text" value="type here ..."> egestas arcu.
</p>

Se per qualche motivo le altre soluzioni non funzionano per te, potresti usare un contenteditable-span invece di un elemento di input.

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

Nota che questo è più un trucco e ha il grave inconveniente di consentire input HTML totalmente non disinfettati come consentire agli utenti di inserire (e incollare) interruzioni di riga, collegamenti e altro HTML.

Quindi probabilmente non dovresti usare questa soluzione a meno che tu non stia disinfettando molto attentamente l'input ...

Aggiornamento : probabilmente vorrai utilizzare la soluzione di DreamTeK di seguito .

Modifica : il plug-in ora funziona con i caratteri di spazio vuoto finali. Grazie per averlo segnalato @JavaSpyder

Poiché la maggior parte delle altre risposte non corrispondevano a ciò di cui avevo bisogno (o semplicemente non funzionavano affatto), ho modificato la risposta di Adrian B in un plug-in jQuery appropriato che si traduce in un perfetto ridimensionamento dei pixel dell'input senza richiedere di modificare il tuo css o html.

Esempio: https://jsfiddle.net/587aapc2/

Utilizzo:$("input").autoresize({padding: 20, minWidth: 20, maxWidth: 300});

Collegare:

//JQuery plugin:
$.fn.textWidth = function(_text, _font){//get width of text with font.  usage: $("div").textWidth();
        var fakeEl = $('<span>').hide().appendTo(document.body).text(_text || this.val() || this.text()).css({font: _font || this.css('font'), whiteSpace: "pre"}),
            width = fakeEl.width();
        fakeEl.remove();
        return width;
    };

$.fn.autoresize = function(options){//resizes elements based on content size.  usage: $('input').autoresize({padding:10,minWidth:0,maxWidth:100});
  options = $.extend({padding:10,minWidth:0,maxWidth:10000}, options||{});
  $(this).on('input', function() {
    $(this).css('width', Math.min(options.maxWidth,Math.max(options.minWidth,$(this).textWidth() + options.padding)));
  }).trigger('input');
  return this;
}



//have <input> resize automatically
$("input").autoresize({padding:20,minWidth:40,maxWidth:300});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input value="i magically resize">
<br/><br/>
called with:
$("input").autoresize({padding: 20, minWidth: 40, maxWidth: 300});

Ho un plug-in jQuery su GitHub: https://github.com/MartinF/jQuery.Autosize.Input

Rispecchia il valore dell'input, calcola la larghezza e la utilizza per impostare la larghezza dell'input.

Puoi vedere un esempio dal vivo qui: http://jsfiddle.net/mJMpw/2175/

Esempio di come utilizzarlo (perché è necessario del codice quando si pubblica un collegamento jsfiddle):

<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;    
}

Usa semplicemente css per impostare la larghezza minima / massima e usa una transizione sulla larghezza se vuoi un bell'effetto.

È possibile specificare lo spazio / distanza fino alla fine come valore nella notazione json per l'attributo data-autosize-input sull'elemento di input.

Ovviamente puoi anche inizializzarlo usando jQuery

$("selector").autosizeInput();

Ci sono già molte buone risposte qui. Per divertimento, ho implementato questa soluzione di seguito, sulla base delle altre risposte e delle mie idee.

<input class="adjust">

L'elemento di input viene regolato in modo preciso al pixel e può essere definito un offset aggiuntivo.

function adjust(elements, offset, min, max) {

    // Initialize parameters
    offset = offset || 0;
    min    = min    || 0;
    max    = max    || Infinity;
    elements.each(function() {
        var element = $(this);

        // Add element to measure pixel length of text
        var id = btoa(Math.floor(Math.random() * Math.pow(2, 64)));
        var tag = $('<span id="' + id + '">' + element.val() + '</span>').css({
            'display': 'none',
            'font-family': element.css('font-family'),
            'font-size': element.css('font-size'),
        }).appendTo('body');

        // Adjust element width on keydown
        function update() {

            // Give browser time to add current letter
            setTimeout(function() {

                // Prevent whitespace from being collapsed
                tag.html(element.val().replace(/ /g, '&nbsp'));

                // Clamp length and prevent text from scrolling
                var size = Math.max(min, Math.min(max, tag.width() + offset));
                if (size < max)
                    element.scrollLeft(0);

                // Apply width to element
                element.width(size);
            }, 0);
        };
        update();
        element.keydown(update);
    });
}

// Apply to our element
adjust($('.adjust'), 10, 100, 500);

La regolazione viene attenuata con una transizione CSS.

.adjust {
    transition: width .15s;
}

Ecco il violino . Spero che questo possa aiutare gli altri alla ricerca di una soluzione pulita.

Invece di provare a creare un div e misurare la sua larghezza, penso che sia più affidabile misurare la larghezza direttamente utilizzando un elemento canvas che è più preciso.

function measureTextWidth(txt, font) {
    var element = document.createElement('canvas');
    var context = element.getContext("2d");
    context.font = font;
    return context.measureText(txt).width;
}

Ora puoi usarlo per misurare quale dovrebbe essere la larghezza di alcuni elementi di input in qualsiasi momento, facendo questo:

// assuming inputElement is a reference to an input element (DOM, not jQuery)
var style = window.getComputedStyle(inputElement, null);
var text = inputElement.value || inputElement.placeholder;
var width = measureTextWidth(text, style.font);

Questo restituisce un numero (possibilmente in virgola mobile). Se vuoi tenere conto del padding puoi provare questo:

  var desiredWidth = (parseInt(style.borderLeftWidth) +
      parseInt(style.paddingLeft) +
      Math.ceil(width) +
      1 + // extra space for cursor
      parseInt(style.paddingRight) +
      parseInt(style.borderRightWidth))
  inputElement.style.width = desiredWidth + "px";

Ho trovato un'altra soluzione per questo problema che non coinvolge JS. In HTML ho appena messo qualcosa come:

<div>
  <input class="input" value={someValue} />
  <div class="ghost-input">someValue</div>
</div>

Tutto ciò che serve è impostare la visibilità: nascosto sull'input fantasma e larghezza: 100% sull'input stesso. Funziona perché l'input scala al 100% del suo contenitore la cui larghezza è calcolata dal browser stesso (in base allo stesso testo).

Se aggiungi del padding e del bordo al campo di input, devi regolare di conseguenza la tua classe di input fantasma (o utilizzare calc () nella classe di input).

Puoi risolvere questo problema come qui :) 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');

Purtroppo l' sizeattributo non funzionerà molto bene. Ci sarà spazio extra e a volte troppo poco, a seconda di come è impostato il carattere. (guarda l'esempio)

Se vuoi che funzioni bene, prova a osservare le modifiche sull'input e ridimensionalo. Probabilmente vorrai impostarlo su input scrollWidth. Dovremmo tenere conto anche delle dimensioni della scatola.

Nell'esempio seguente, imposto sizel'input su 1 per evitare che abbia un valore scrollWidthmaggiore della nostra larghezza iniziale (impostata manualmente con CSS).

// (no-jquery document.ready)
function onReady(f) {
    "complete" === document.readyState
        ? f() : setTimeout(onReady, 10, f);
}

onReady(function() {
    [].forEach.call(
        document.querySelectorAll("input[type='text'].autoresize"),
        registerInput
    );
});
function registerInput(el) {
    el.size = 1;
    var style = el.currentStyle || window.getComputedStyle(el),
        borderBox = style.boxSizing === "border-box",
        boxSizing = borderBox
            ? parseInt(style.borderRightWidth, 10) +
                parseInt(style.borderLeftWidth, 10)
            : 0;
    if ("onpropertychange" in el) {
         // IE
         el.onpropertychange = adjust;
    } else if ("oninput" in el) {
         el.oninput = adjust;
    }
    adjust();

    function adjust() {

        // reset to smaller size (for if text deleted) 
        el.style.width = "";

        // getting the scrollWidth should trigger a reflow
        // and give you what the width would be in px if 
        // original style, less any box-sizing
        var newWidth = el.scrollWidth + boxSizing;

        // so let's set this to the new width!
        el.style.width = newWidth + "px";
    }
}

* {
  font-family: sans-serif;
}
input.autoresize {
  width: 125px;
  min-width: 125px;
  max-width: 400px;
}
input[type='text'] {
  box-sizing: border-box;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

<label> 
  Resizes:
  <input class="autoresize" placeholder="this will resize" type='text'>
</label>
<br/>
<label>
  Doesn't resize:
<input placeholder="this will not" type='text'>
</label>
<br/>
<label>
  Has extra space to right:
  <input value="123456789" size="9" type="text"/>
</label>

Penso che dovrebbe funzionare anche in IE6, ma non credermi sulla parola.

A seconda del caso d'uso, potrebbe essere necessario associare la funzione di regolazione ad altri eventi. Ad esempio, modificare il valore di un input a livello di codice o modificare la displayproprietà dello stile dell'elemento da none(dove scrollWidth === 0) a blocko inline-block, ecc.

Il mio plugin jQuery funziona per me:

Utilizzo:

    $('form input[type="text"]').autoFit({

    });

Codice sorgente di jquery.auto-fit.js:

;
(function ($) {
    var methods = {
        init: function (options) {
            var settings = $.extend(true, {}, $.fn.autoFit.defaults, options);
            var $this = $(this);

            $this.keydown(methods.fit);

            methods.fit.call(this, null);

            return $this;
        },

        fit: function (event) {
            var $this = $(this);

            var val = $this.val().replace(' ', '-');
            var fontSize = $this.css('font-size');
            var padding = $this.outerWidth() - $this.width();
            var contentWidth = $('<span style="font-size: ' + fontSize + '; padding: 0 ' + padding / 2 + 'px; display: inline-block; position: absolute; visibility: hidden;">' + val + '</span>').insertAfter($this).outerWidth();

            $this.width((contentWidth + padding) + 'px');

            return $this;
        }
    };

    $.fn.autoFit = function (options) {
        if (typeof options == 'string' && methods[options] && typeof methods[options] === 'function') {
            return methods[options].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof options === 'object' || !options) {
            // Default to 'init'
            return this.each(function (i, element) {
                methods.init.apply(this, [options]);
            });
        } else {
            $.error('Method ' + options + ' does not exist on jquery.auto-fit.');
            return null;
        }
    };

    $.fn.autoFit.defaults = {};

})(this['jQuery']);

Gli elementi di input si comportano in modo diverso dagli altri elementi, il che farebbe esattamente quello che vuoi se li dai float: left(vedi http://jsfiddle.net/hEvYj/5/ ). Non credo che sia possibile senza calcolarlo in qualche modo con JavaScript (ovvero aggiungere 5px alla larghezza per lettera nella casella).

La soluzione dell'utente nrabinowitz funziona alla grande, ma io uso l' keypressevento invece di keyup. Ciò riduce la latenza se l'utente digita lentamente.

Ecco la mia modifica della soluzione di nrabinowitz . Non ho usato la proprietà size , perché non è perfetta con i caratteri proporzionali come ha notato @Mark. La mia soluzione inserisce un elemento dopo l'input e ottiene la larghezza conteggiata dal browser (utilizzando jQuery).

Sebbene non lo provi, suppongo che funzionerà solo se tutte le proprietà CSS che influenzano i caratteri vengono ereditate.

La larghezza di input cambia all'evento focusout , che funziona meglio per me. Ma puoi usare keyup / keypress per modificare la larghezza dell'input anche durante la digitazione.

function resizeInput() {

    //Firstly take the content or placeholder if content is missing.
    var content =
        $(this).val().length > 0 ? $(this).val() : $(this).prop("placeholder");

    //Create testing element with same content as input.
    var widthTester = $("<span>"+content+"</span>").hide();

    //Place testing element into DOM after input (so it inherits same formatting as input does).
    widthTester.insertAfter($(this));

    //Set inputs width; you may want to use outerWidth() or innerWidth()
    //depending whether you want to count padding and border or not.
    $(this).css("width",widthTester.width()+"px");

    //Remove the element from the DOM
    widthTester.remove();
 }

 $('.resizing-input').focusout(resizeInput).each(resizeInput);

Usando canvas potremmo calcolare la larghezza degli elementi:

function getTextWidth(text, fontSize, fontName) {
  let canvas = document.createElement('canvas');
  let context = canvas.getContext('2d');
  context.font = fontSize + fontName;
  return context.measureText(text).width;
}

e usalo sull'evento scelto:

function onChange(e) {
  let width = getTextWidth(this.value, $(this).css('font-size'), 
  $(this).css('font-family'));
  $(this.input).css('width', width);
}

prova la soluzione di misura del testo della tela

css:

    input{
        min-width:10px!important;
        max-width:99.99%!important;
        transition: width 0.1s;
        border-width:1px;
    }

javascript:

function getWidthOfInput(input){
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var text = input.value.length ? input.value : input.placeholder;
    var style = window.getComputedStyle(input);
    ctx.lineWidth = 1;
    ctx.font = style.font;
    var text_width = ctx.measureText(text).width;
    return text_width;
}

function resizable (el, factor) {
    function resize() {
        var width = getWidthOfInput(el);
        el.style.width = width + 'px';
    }
    var e = 'keyup,keypress,focus,blur,change'.split(',');
    for (var i in e){
        el.addEventListener(e[i],resize,false);
    }
    resize();
}

$( "input" ).each( function(i){
    resizable(this);
});

Ho risolto la larghezza creando una tela e calcolandone le dimensioni. è importante che il valore di input e la tela condividano le stesse caratteristiche dei caratteri (famiglia, dimensione, peso ...)

import calculateTextWidth from "calculate-text-width";

/*
 requires two props "value" and "font"
  - defaultFont: normal 500 14px sans-serif 
 */
const defaultText = 'calculate my width'
const textFont = 'normal 500 14px sans-serif'
const calculatedWidth = calculateTextWidth(defaultText, textFont)
console.log(calculatedWidth) // 114.37890625

GitHub: https://github.com/ozluy/calculate-text-width CodeSandbox: https://codesandbox.io/s/calculate-text-width-okr46