Aggiusta dinamicamente la larghezza di input del testo HTML al contenuto

Question

Non riesco a trovare una risposta chiara su questo, e mi scusi se ce n'è una che ho perso.

Desidero che le larghezze di input del testo si adattino automaticamente alle dimensioni del contenuto al loro interno. Innanzitutto con il testo segnaposto rispetto al testo effettivo inserito da qualcuno.

Ho creato il seguente esempio. Attualmente, le scatole sono molto più grandi del mio testo segnaposto, causando enormi quantità di spazio bianco, ed è ovviamente la stessa cosa quando scrivo qualcosa.

Ho provato larghezza auto, alcuni jQuery e spago e gomme da masticare che ho trovato su internet. Ma nulla ha funzionato ancora. qualche idea? Grazie!

HTML:

<span><p>Hello, my name is </p></span> 

<span><input type="text" id="input" class="form" placeholder="name"></span> 

<span><p>. I am </p></span> 

<span><input type="text" id="input" class="form" placeholder="age"></span> 

    <span><p> years old.</p></span> 

CSS:

.form { 
    border: 0; 
    text-align: center; 
    outline: none; 
} 

span { 
    display: inline-block; 
} 

p { 
    font-family: arial; 
} 

Fiddle

Answer 1

Usa onkeypress anche

vedere questo esempio:http://jsfiddle.net/kevalbhatt18/yug04jau/7/

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

E per segnaposto sull'uso carico jquery e applicare segnaposto dimensione in all'input

$('input').css('width',((input.getAttribute('placeholder').length + 1) * 8) + 'px'); 

Anche è possibile utilizzare id invece di ingresso questo è solo un esempio in modo che io utilizzati $ (ingresso)

E in css fornire min-width

.form { 
    border: 1px solid black; 
    text-align: center; 
    outline: none; 
    min-width:4px; 
} 

---

EDIT:

---

Se si rimuove tutto il testo dalla casella di input allora ci vorrà valore segnaposto utilizzando focusOut

Esempio: http://jsfiddle.net/kevalbhatt18/yug04jau/8/

$("input").focusout(function(){ 

    if(this.value.length>0){ 
     this.style.width = ((this.value.length + 1) * 8) + 'px'; 
    }else{ 
     this.style.width = ((this.getAttribute('placeholder').length + 1) * 8) + 'px'; 
    } 

}); 

Answer 2

Un modo possibile:

[contenteditable=true]:empty:before { 
 
    content: attr(placeholder); 
 
    color:gray; 
 
} 
 
/* found this online --- it prevents the user from being able to make a (visible) newline */ 
 
[contenteditable=true] br{ 
 
    display:none; 
 
}

<p>Hello, my name is <span id="name" contenteditable="true" placeholder="name"></span>. I am <span id="age" contenteditable="true" placeholder="age"></span> years old.</p>

Fonte per CSS: http://codepen.io/flesler/pen/AEIFc.

Dovrai fare qualche trucco per raccogliere i valori se hai bisogno dei valori per un modulo.

Answer 3

Kevin F ha ragione, non esiste un modo nativo per farlo.

Ecco un modo per farlo se si vuole davvero che accada.

Nel codice, c'è un'apertura invisibile in cui è posizionato il testo. Quindi recuperiamo la larghezza dello span.

https://jsfiddle.net/r02ma1n0/1/

var testdiv = $("#testdiv"); 
$("input").keydown(function(){ 
    var ME = $(this); 
    //Manual Way 
    //var px = 6.5; 
    //var txtlength = ME.val().length; 
    //$(this).css({width: txtlength * px }); 

    testdiv.html(ME.val() + "--"); 
    var txtlength = testdiv.width(); 
    ME.css({width: txtlength }); 
});