Był na ten temat kolejny wątek , który próbowałem. Ale jest jeden problem: textarea
nie zmniejsza się, jeśli usuniesz zawartość. Nie mogę znaleźć żadnego sposobu, aby zmniejszyć go do właściwego rozmiaru - clientHeight
wartość wraca jako pełny rozmiar textarea
, a nie jego zawartość.
Kod z tej strony znajduje się poniżej:
function FitToContent(id, maxHeight)
{
var text = id && id.style ? id : document.getElementById(id);
if ( !text )
return;
var adjustedHeight = text.clientHeight;
if ( !maxHeight || maxHeight > adjustedHeight )
{
adjustedHeight = Math.max(text.scrollHeight, adjustedHeight);
if ( maxHeight )
adjustedHeight = Math.min(maxHeight, adjustedHeight);
if ( adjustedHeight > text.clientHeight )
text.style.height = adjustedHeight + "px";
}
}
window.onload = function() {
document.getElementById("ta").onkeyup = function() {
FitToContent( this, 500 )
};
}
Odpowiedzi:
To działa dla mnie (Firefox 3.6 / 4.0 i Chrome 10/11):
Jeśli chcesz wypróbować na jsfiddle. Zaczyna się od pojedynczej linii i rośnie tylko niezbędna ilość. Jest to w porządku dla jednego singla
textarea
, ale chciałem napisać coś, w którym miałbym wiele, wiele takichtextarea
(mniej więcej tyle, ile normalnie miałyby linie w dużym dokumencie tekstowym). W takim przypadku jest to naprawdę powolne. (W przeglądarce Firefox jest niesamowicie powolny.) Naprawdę chciałbym zastosować podejście, które wykorzystuje czysty CSS. Byłoby to możliwecontenteditable
, ale chcę, aby było to tylko zwykły tekst.źródło
style.height='auto'
. Podejrzewam, że rozwiązaniem jest dodanie ukrytego rodzeństwa używanego tylko do pomiaru.KOMPLETNE JESZCZE PROSTE ROZWIĄZANIE
Zaktualizowano 2020-05-14 (Poprawiona obsługa przeglądarki dla telefonów komórkowych i tabletów)
Działa następujący kod:
OPCJA 1 (z jQuery)
Ta opcja wymaga jQuery i została przetestowana i działa z wersjami 1.7.2 - 3.3.1
Prosty (Dodaj ten kod jquery do głównego pliku skryptu i zapomnij o nim).
Test on jsfiddle
OPCJA 2 (czysty JavaScript)
Proste (dodaj ten kod JavaScript do głównego pliku skryptu i zapomnij o nim).
Test on jsfiddle
OPCJA 3 (rozszerzenie jQuery)
Przydatne, jeśli chcesz zastosować dalsze tworzenie łańcuchów w obszarach tekstowych, w których chcesz automatycznie zmieniać rozmiar.
Wywołaj z
$('textarea').autoHeight()
AKTUALIZACJA TEXTAREA PRZEZ JAVASCRIPT
Podczas wstrzykiwania treści do obszaru tekstowego za pomocą JavaScript dołącz następujący kod, aby wywołać funkcję w opcji 1.
WSTĘPNA WYSOKOŚĆ TEKSTAREA
Aby naprawić początkową wysokość obszaru tekstowego, musisz dodać dodatkowy warunek:
źródło
this.style.height = 'auto';
jest poprawka magicznego zachowania. Byłem tak sfrustrowany, dlaczego scrollHeight był tak dziwny w zachowaniu. Wysokość automatyczna, a następnie dopasowanie scrollHeight w tym samym cyklu renderowania wciąż mnie zastanawia, jak to „naprawia” ten problem, chociaż technicznie powinien malować tylko drugą wysokość.this.style.height = 'auto';
naprawia zachowanie scrollHeight? To tylko magia.Rozwiązanie jQuery dostosowuje css do twoich wymagań
css ...
javascript ...
LUB alternatywa dla jQuery 1.7 + ...
Jako punkt wyjścia do eksperymentów stworzyłem skrzypce z absolutnie minimalnym stylem. Http://jsfiddle.net/53eAy/951/
źródło
overflow-y: hidden;
do css, aby zapobiec krótkiemu miganiu paska przewijania, gdy nastąpi zmiana rozmiaru.$('textarea.auto-resize').on('change cut paste drop keyup', function(){...})
Testowane w Firefox 14 i Chromium 18. Liczby 24 i 12 są dowolne, przetestuj, aby sprawdzić, co najbardziej Ci odpowiada.
Możesz obejść się bez tagów stylu i skryptu, ale staje się nieco niechlujny imho (jest to stary styl HTML + JS i nie jest zachęcany).
Edycja: zmodernizowany kod. Zmieniono atrybut onkeyup na addEventListener.
Edycja: keydown działa lepiej niż keyup
Edycja: deklaracja funkcji przed użyciem
Edycja: wejście działa lepiej niż keydown (thnx @ WASD42 i @ MA-Maddin)
jsfiddle
źródło
input
Zamiast tego skorzystaj z wydarzenia. Zobacz stackoverflow.com/a/14029861/1951524textarea
wsparciem jako jednej linijki:document.querySelectorAll('textarea').forEach(function(te){ te.addEventListener("input", function() { this.style.height='24px'; this.style.height=this.scrollHeight+12+'px'; }); });
removeEventListener
i czyścić detektory zdarzeń. Jest to szczególnie ważne przy tworzeniu detektorów zdarzeń w dowolnym miejscu w pętli forEach. Ponadto, moim zdaniem, czytelność jest znacznie ważniejsza niż zwięzłość.box-sizing: border-box;
właściwość jest ustawiona, w przeciwnym razie obszar tekstowy powiększy się o 4px dla każdego zdarzenia onInput. Spędziłem około 3 godzin, dopóki nie zorientowałem się, że to jest problem.Najlepsze rozwiązanie (działa i jest krótkie) dla mnie to:
Działa jak urok bez mrugania pastą (również myszą), cięcia, wchodzenia i kurczy się do odpowiedniego rozmiaru.
Proszę spojrzeć na jsFiddle .
źródło
Używasz wyższej wartości bieżącego clientHeight i content scrollHeight. Gdy zmniejszysz scrollHeight poprzez usunięcie zawartości, obliczony obszar nie może się zmniejszyć, ponieważ clientHeight, wcześniej ustawiony przez style.height, utrzymuje go otwartym. Zamiast tego możesz wziąć max () scrollHeight i minimalną wartość wysokości, którą wcześniej zdefiniowałeś lub obliczyłeś z textarea.rows.
Ogólnie rzecz biorąc, prawdopodobnie nie powinieneś polegać na scrollHeight na kontrolkach formularzy. Oprócz tego, że scrollHeight jest tradycyjnie mniej obsługiwany niż niektóre inne rozszerzenia IE, HTML / CSS nie mówi nic o tym, jak formanty formularzy są implementowane wewnętrznie i nie ma gwarancji, że scrollHeight będzie miał jakiekolwiek znaczenie. (Tradycyjnie niektóre przeglądarki używają do tego zadania widżetów systemu operacyjnego, co uniemożliwia interakcję CSS i DOM na ich elementach wewnętrznych.) Przynajmniej wąchaj istnienie scrollHeight / clientHeight przed próbą włączenia efektu.
Innym możliwym alternatywnym podejściem do uniknięcia problemu, jeśli ważne jest, aby działał szerzej, może być użycie ukrytego elementu div o tej samej szerokości co obszar tekstowy i ustawienie tej samej czcionki. Przy wprowadzaniu klucza kopiujesz tekst z obszaru tekstowego do węzła tekstowego w ukrytym div (pamiętając o zastąpieniu „\ n” znakiem podziału linii i odpowiednio „+” i „+”, jeśli używasz innerHTML). Następnie wystarczy zmierzyć przesunięcie divWysokość da ci potrzebną wysokość.
źródło
scrollHeight
obszarami tekstowymi? Działa dobrze z aktualnymi wersjami IE, Firefox i Opera ...Jeśli nie potrzebujesz obsługiwać IE8, możesz użyć
input
zdarzenia:Teraz wystarczy tylko dodać trochę CSS i gotowe:
Stosowanie:
Możesz przeczytać więcej o tym, jak to działa na moim blogu .
źródło
input
zdarzenie podczas inicjalizacji w cyklu foreach.rozmiar auta
https://github.com/jackmoore/autosize
Po prostu działa, samodzielny, jest popularny (3,0 tys. + Gwiazdy GitHub od października 2018 r.), Dostępny na cdnjs ) i lekki (~ 3,5 tys.). Próbny:
BTW, jeśli używasz edytora ACE, użyj
maxLines: Infinity
: Automatycznie dostosuj wysokość do zawartości w edytorze Ace Cloud 9źródło
autosize
Plugin nie pozwala na zmianę rozmiaru ręcznie za pomocą ikony zmiany rozmiaru w textarea.Znalazłem stąd jeden liniowiec ;
źródło
Czy ktoś uznał za zadowalające? Bez przewijania przy przewijaniu, a jedynym JS, który mi się podoba, jest to, jeśli planujesz zapisać dane na rozmyciu ... i najwyraźniej jest kompatybilny ze wszystkimi popularnymi przeglądarkami: http://caniuse.com/#feat = zadowalający
Wystarczy nadać mu styl, aby wyglądał jak pole tekstowe, i automatycznie się zmienia ... Ustaw minimalną wysokość na preferowaną wysokość tekstu i ustaw ją.
Fajne w tym podejściu jest to, że możesz zapisywać i tagować w niektórych przeglądarkach.
http://jsfiddle.net/gbutiri/v31o8xfo/
źródło
contenteditable
jest dobry, ale jeśli chcesz w postaci zwykłego tekstu, potrzebujesz wielu opcji takich jak-webkit-user-modify: read-write-plaintext-only
iwhite-space: pre-wrap
.[dom-element].innerText
. @WebmasterG IMHO byłoby miło pominąć jquery (dla przejrzystości) i dołączyć przykład na tej stronie poprzez uruchamiany fragment kodu zamiast w jsfiddle.Użyłem następującego kodu dla wielu obszarów tekstowych. Działa dobrze w Chrome 12, Firefox 5 i IE 9, nawet z działaniami usuwania, wycinania i wklejania wykonywanymi w obszarach tekstowych.
źródło
Istnieje nieco inne podejście.
Chodzi o to, aby skopiować tekst z
textarea
Into thepre
i niech CSS upewnij się, że mają ten sam rozmiar.Korzyścią jest to, że frameworki oferują proste narzędzia do przenoszenia tekstu bez dotykania żadnych zdarzeń. Mianowicie, w AngularJS dodajesz a
ng-model="foo" ng-trim="false"
dotextarea
ing-bind="foo + '\n'"
dopre
. Zobacz skrzypce .Tylko upewnij się, że
pre
ma taki sam rozmiar czcionki jaktextarea
.źródło
pre
ma taki sam rozmiar czcionki jaktextarea
” - Potrzebują tego samegoline-height
i równej ilościpadding
i / lubborder
też. To najlepsze rozwiązanie dla Angulara.Poniższe czynności służą do wycinania, wklejania itp., Niezależnie od tego, czy te działania są wykonywane za pomocą myszy, skrótu klawiaturowego, wybrania opcji z paska menu ... kilka odpowiedzi przyjmuje podobne podejście, ale nie uwzględnia pola rozmiaru, dlatego nieprawidłowo stosują styl
overflow: hidden
.I wykonaj następujące czynności, która również działa dobrze
max-height
irows
dla minimalnej i maksymalnej wysokości.Aby uzyskać całkowitą kompletność, należy wywołać
adjust
funkcję w kilku innych okolicznościach:textarea
zmieniają rozmiar okna, jeśli szerokość zmian wraz ze zmianą rozmiaru okna lub inne zdarzenia zmieniające szerokość obszaru tekstowegotextarea
„sdisplay
zmiany atrybutów stylu, np gdy idzie znone
(ukryte) doblock
textarea
zmienia się programowoPamiętaj, że używanie
window.getComputedStyle
lub pobieraniecurrentStyle
może być nieco kosztowne obliczeniowo, więc zamiast tego możesz chcieć buforować wynik.Działa dla IE6, więc naprawdę mam nadzieję, że to wystarczająco dobre wsparcie.
źródło
Jako inne podejście możesz użyć narzędzia,
<span>
które automatycznie dostosowuje jego rozmiar. Będziesz musiał go edytować, dodająccontenteditable="true"
właściwość i gotowe:Jedynym problemem związanym z tym podejściem jest to, że jeśli chcesz przesłać wartość jako część formularza, musisz to zrobić samodzielnie w JavaScript. Jest to stosunkowo łatwe. Na przykład możesz dodać ukryte pole, aw
onsubmit
przypadku formularza przypisać wartośćspan
do ukrytego pola, które zostanie następnie automatycznie przesłane z formularzem.źródło
Trochę poprawek. Działa idealnie w Operze
źródło
Znam krótki i prawidłowy sposób implementacji tego za pomocą jquery. Nie jest wymagany żaden dodatkowy ukryty div i działa on w większości przeglądarek
źródło
.live()
jest przestarzałe. api.jquery.com/live Zazwyczaj.on()
zamiast tego będziesz chciał użyć .Nie wiem, czy ktoś wspomina w ten sposób, ale w niektórych przypadkach można zmienić wysokość za pomocą wiersza Attribute
Próbny
źródło
white-space: nowrap;
. Kiedy linia zawija się do innej linii bez podziału linii, obszar tekstowy nie będzie już odpowiednio dopasowywany.Oto dyrektywa angularjs dla odpowiedzi panzi.
HTML:
źródło
Możesz użyć JQuery do rozszerzenia
textarea
podczas pisania:źródło
${textarea.scrollHeight}px
;});Ci, którzy chcą osiągnąć to samo w nowych wersjach Angular.
Pobierz textArea elementRef.
Dodam również inny przypadek użycia, który może się przydać niektórym użytkownikom czytającym wątek, gdy użytkownik chce zwiększyć wysokość pola tekstowego do pewnej wysokości, a następnie mieć
overflow:scroll
na nim powyższą metodę można rozszerzyć, aby osiągnąć wspomniany przypadek użycia.źródło
Niektóre odpowiedzi tutaj nie uwzględniają wypełniania.
Zakładając, że masz maksymalną wysokość, której nie chcesz przekraczać, działało to dla mnie:
źródło
Jeszcze prostsze i czystsze podejście jest następujące:
// i CSS
Wystarczy dodać
.auto-height
klasę do dowolnego, natextarea
który chcesz kierować.Testowane w FF, Chrome i Safari. Daj mi znać, jeśli z jakiegoś powodu to nie zadziała. Ale to najczystszy i najprostszy sposób, w jaki udało mi się to osiągnąć. I działa świetnie! :RE
źródło
Ten kod działa podczas wklejania i wybierz również usuń.
Oto JSFiddle
źródło
Polecam bibliotekę javascript z http://javierjulio.github.io/textarea-autosize .
W komentarzach dodaj przykładowy blok kodu dotyczący użycia wtyczki:
Minimalny wymagany CSS:
źródło
MakeTextAreaResisable, który używa qQuery
źródło
Żadna z odpowiedzi wydaje się nie działać. Ale ten działa dla mnie: https://coderwall.com/p/imkqoq/resize-textarea-to-fit-content
źródło
moja implementacja jest bardzo prosta, policz liczbę linii na wejściu (i minimum 2 wiersze, aby pokazać, że jest to obszar tekstowy):
pełny działający przykład z bodźcem: https://jsbin.com/kajosolini/1/edit?html,js,output
(i działa to na przykład z ręcznym uchwytem zmiany rozmiaru przeglądarki)
źródło
Zaakceptowana odpowiedź działa poprawnie. Ale to dużo kodu dla tej prostej funkcjonalności. Poniższy kod załatwi sprawę.
źródło
Oto, co zrobiłem podczas korzystania z MVC HTML Helper dla TextArea. Miałem sporo elementów textarea, więc musiałem je rozróżnić za pomocą identyfikatora modelu.
i w skrypcie dodał to:
Przetestowałem to na IE10 i Firefox23
źródło
Możesz użyć tego kodu:
Coffescript:
JavaScript
źródło