2009-10-19 15 views
16

Chcę zapewnić zmianę rozmiaru textarea control dla użytkowników. Zrobiłem to i spojrzałem na kilka innych implementacji, ale nie mogę znaleźć takiego, który spełnia wszystkie moje wymagania. W szczególności chcę kontrolę że:Wyszukiwanie ostatecznego rozmiaru Textarea

  • Pracuje w IE6, IE7, IE8 w Windows i Firefox 3 i 3.5 na Windows i OS X, gdy strona jest renderowane w normach tryb zgodny (czyli nie w trybie quirks).
  • Nie zepsuł bufora cofania/cofaj stosu. Jest to szczególnie nieprzyjemny problem z IE - dodanie węzłów, usunięcie węzłów i niektórych innych operacji DOM spowoduje zresetowanie bufora wejściowego, co oznacza, że ​​jeśli implementacja będzie opierała się na tych technikach, cofanie nie będzie zachowywać się tak, jak w standardowej kontroli obszaru tekstowego. Nie byłem w stanie znaleźć wiele informacji na temat tego błędu z wyjątkiem this note. Wdrożenia, takie jak jQuery Auto Growing Plugin, cierpią z powodu tego problemu - spróbuj cofnąć zmiany w IE i porównać, jak działa to w standardowym obszarze tekstowym. Dodałem example page demonstrujący ten problem do JSBin.
  • Ma maksymalną wysokość, powyżej której kontrola nie może wzrosnąć.
  • Zmniejsza się odpowiednio po usunięciu treści.
  • Nie migocze ani nie działa dziwnie po naciśnięciu klawisza. na przykład jQuery Auto Growing Kontrolka Textarea zachowuje się dziwnie z, przynajmniej IE7, kiedy kontrola wzrosła poza początkowy rozmiar.
  • Nie wymaga użycia przez kontrolkę czcionki o stałej szerokości/stałej szerokości.

Najbliżej widziałem czegoś, który działa podobnie jak to jest status pola Facebooka, który jest zaimplementowany jako zawartość edycji elementu div, ale mam pewne zastrzeżenia co do używania takiego elementu, ponieważ za pomocą div oznacza:

  • Konieczne jest wyraźne zaznaczenie granicy, co oznacza, że ​​moglibyśmy zakończyć ramką wyglądającą inaczej niż natywne pole tekstowe.
  • Chcesz zsynchronizować zawartość z prawdziwym tekstem (prawdopodobnie w obu kierunkach?).
  • Dodaje złożoności podczas umieszczania podpowiedzi i innych elementów w stosunku do położenia textarea.
  • Podczas gdy to podejście działa w przypadku aktualizacji statusu na Facebooku, jak dobrze by działało w postaci zawierającej setki standardowych elementów wejściowych?

To, co przedstawiłem powyżej, przedstawia "ostateczną zmianę rozmiaru tekstu" - odnosząc się do tego, co uważam za problem z istniejącymi podejściami. Czy taka kontrola istnieje? Czy można napisać taką kontrolę?

+1

"Jak dobrze by działało w postaci zawierającej setki standardowych elementów wejściowych?" Czy wiele z tych tekstowych tekstów byłoby używanych na tej samej stronie? – Tom

+0

Potencjalnie tak. Rzecz z Facebookiem (lub nawet z Dokumentami Google) polega na tym, że naprawdę muszą zajmować się jednym elementem contentEditable na stronie, co jest oczywiście znacznie prostsze niż w przypadku 20+. –

Odpowiedz

6

Wyjazd DOJO tools text area control

zobacz więcej na ten demo page (pole tekstowe Na końcu formularza)

To ściśle przyjść z własnymi wymaganiami.

+0

Dziwne - strona demonstracyjna nie wydaje się mieć problemu ze stosem cofania w IE, ale kopiuje przykład z początkowego linku. –

2

Chcesz automatycznie dopasować rozmiar ekranu? ale pozostawić treść tak samo?

To wszystkie skrypty mogą zrobić, ustawić wyświetlanie i pozwalają zobaczyć więcej z własnego tekstu ...

+0

Tak, chcę szablonu, który zmienia rozmiar na zawartość na podstawie powyższych kryteriów. –

+2

Cholera, to wymagające: p –

3

Może trzeba będzie toczyć własną rękę, aby spełnić te wymagania.

To może być początek.

http://tuckey.org/textareasizer/ (chociaż spróbować uniknąć eval() w twoim)

http://www.felgall.com/jstip45.htm

http://viralpatel.net/blogs/2009/06/textarea-resize-javascript-jquery-plugin-resize-textarea-html.html

To rzeczywiście wydaje się dobrym plugin jQuery. Mogę mieć problem z opracowaniem czegoś takiego. Jeśli to zrobię, opublikuję to tutaj.

Kilka godzin pracowałem nad opracowaniem czegoś, ale potem znalazłem ten, który wydaje się być naprawdę dobry.

http://www.aclevercookie.com/demos/autogrow_textarea.html

+0

Rozwiązanie z ViralPatel szczegółowo opisuje, jak stworzyć nieco inną kontrolę niż ta, którą jestem zainteresowany. –

+0

Rozwiązanie Stephena Chapmana nie zmniejsza się, jeśli zawartość zostanie usunięta. –

+0

Funkcja Zmiana obszaru tekstu ma problemy z pomniejszaniem podczas korzystania z przeglądarki Firefox. –

0
+0

Artykuł SitePoint (ten na 3 części) zawiera użyteczne obserwacje dotyczące technik, ale niszczy stos cofania w IE, ponieważ rozwiązanie manipuluje DOM. –

+0

Rozwiązanie z ViralPatel szczegółowo opisuje, jak utworzyć nieco inną kontrolę niż ta, którą jestem zainteresowany. –

+0

Wydaje się, że obszar inteligentny ma problemy z kurczeniem się, szczególnie w Internet Explorerze. –

0

Używam nicEdit. Wydaje się, że ma wszystko, czego potrzebujesz, a skrypt ma tylko 1700 wierszy z licencją MIT, więc możesz wprowadzić dowolne zmiany.

+0

NicEdit polega na treści Techniki, których staram się unikać, ale być może moje zastrzeżenia dotyczące tej techniki są nieuzasadnione. –

2

This A List Apart post zawiera implementację, która wygląda dość blisko spełnienia kryteriów i zawiera dobre wyjaśnienie tego, co się dzieje.