Zmień rozmiar danych wejściowych, aby dopasować je do zawartości

Question

Nie dbam o konkretną technologię, może to być JS, CSS, a nawet niektóre niestandardowe i złe atrybuty html. Chcę tylko, żeby input był większy, jeśli użytkownik nad prawym ramką.

Answer 1

Może ktoś ma lepszy sposób, ale można spróbować to:

Przykład:http://jsfiddle.net/aAueA/1/

var input = document.getElementsByTagName('input')[0]; 

input.onkeypress = input.onkeydown = function() { 
    this.size = (this.value.length > 10) ? this.value.length : 10; 
}; 

ten ustawia go w minimalnej wielkości 10 i rozszerza jeśli wykracza poza 10 postacie.

Prawdopodobnie najlepiej o stałej szerokości czcionki:

input { 
    font-family:Courier; 
} 

Answer 2

Niech przeglądarka zrobić obliczeń szerokości za pomocą div z contenteditable zestaw do true.

<div class="pseudo-input" contenteditable="true">Resizes to my content!</div> 

Nie powinno być żadnych problemów z obsługą przeglądarki http://caniuse.com/#feat=contenteditable

Answer 3

Można również utworzyć elementu div, skopiuj swój styl wejścia do niego i używać jego wymiarów do rozmiaru wejście. (Wybrane wielokrotne zastosowania this solution).

var input = $('input'), 
    dummy = $('<div style="position:absolute; left: -1000%;">').appendTo('body'); 

['font-size', 'font-style', 'font-weight', 'font-family', 
'line-height', 'text-transform', 'letter-spacing'].forEach(function(index) { 
    dummy.css(index, input.css(index)); 
}); 

input.on('input', function() { 
    dummy.html(this.value); 
    input.width(dummy.width()); 
}); 

UPD: lepiej używać pre zamiast div, aby śledzić wielkość spacji.