Dynamicznie dostosuj szerokość tekstu w tekście HTML do treści

Question

Nie mogę znaleźć jasnej odpowiedzi na to pytanie i przepraszam, jeśli jest taka, którą przeoczyłem.

Chcę, aby moje szerokości wprowadzania tekstu automatycznie dostosowywały się do rozmiaru zawartości w nich. Najpierw z tekstem zastępczym, niż tekst, który ktoś wprowadza.

Poniżej stworzyłem poniższy przykład. Obecnie pola są znacznie większe niż mój tekst zastępczy, powodując ogromne ilości białej przestrzeni, i oczywiście jest to to samo, gdy coś wpisuję.

Próbowałem szerokości auto, jQuery oraz sznurka i gumy balonowej, które znalazłem w Internecie. Ale nic jeszcze nie zadziałało. jakieś pomysły? Dzięki!

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

Zastosowanie onkeypress nawet

patrz poniższy przykład: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> 

I zastępczy na temat wykorzystania obciążenia jquery i zastosowanie zastępczego rozmiar w celu wejścia

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

Nawet można użyć id zamiast wejście jest tylko przykładem, abym stosowane $ (wejście)

A w css zapewnić min-width

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

---

EDIT:

---

Jeśli usunąć cały tekst z pola tekstowego, a następnie zajmie wartość zastępczego używając focusOut

przykładu: 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

Jednym z możliwych sposobów:

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

Źródło dla CSS: http://codepen.io/flesler/pen/AEIFc.

Będziesz musiał zrobić sztuczkę, aby podnieść wartości, jeśli potrzebujesz wartości dla formularza.

Answer 3

Kevin F ma rację, nie ma natywnego sposobu na zrobienie tego.

Oto jeden sposób, aby to zrobić, jeśli naprawdę chcesz, aby to się stało.

W kodzie znajduje się niewidoczny zakres, w którym umieszczony jest tekst. Następnie pobieramy szerokość przęsła.

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