Podczas wpisywania tekstu do obszaru tekstowego, który staje się szerszy niż obszar, tekst jest zawijany do następnej linii. Czy istnieje sposób programowo określić, kiedy to się dzieje?Jak wykryć, kiedy linia jest automatycznie pakowana w obszar tekstowy?
Odpowiedz
Nie ma faktycznego zdarzenia wystrzeliwanego podczas zawijania, ale można zhakować rozwiązanie, jeśli znasz szerokość obszaru tekstowego.
Posłuchaj zdarzenia zmiany w polu tekstowym i przenieś tekst do elementu div, który otoczy treść;
<div class="textwidth"></div>
ze stylem:
.textwidth {
position: absolute;
visibility: hidden;
height: auto;
width: auto;
}
obliczyć szerokość div z treścią tekstu i porównać go do stałej szerokości pola tekstowego:
$('textarea').on('keyup', function() {
var lastLine = $(this).val().split('/n').pop();
var width = $('.textwidth').text(lastLine).width();
if (width > $('textarea').width()) {
// fire wrap event
}
});
Oto trochę tandetne skrzypce, które powinny dać ci pewien pomysł: http://jsfiddle.net/cXbAh/1/
Wygląda na to, że to może zadziałać. Ważne jest jednak, aby pamiętać, że te dwie czcionki muszą być dokładnie takie same lub w przeciwnym razie nie zostaną uruchomione. –
@ ChristopherCortez Monospace również ułatwiłoby to! – Jivings
Rzeczywiście. Próbowałem wymyślić bardziej niezawodne rozwiązanie, wykorzystując twój kod jako podstawę, ale teraz jestem podatny na niewiarygodność między przeglądarkami (co nie jest zaskakujące). –
You ca n mierzyć każdą szerokość linii za pomocą "ukrytego" zakresu.
Jeśli szerokość linii jest większa niż szerokość textarea następnie linia jest owinięty
function textWidth(txt, font, padding) {
$span = $('<span></span>');
$span.css({
font:font,
position:'absolute',
top: -1000,
left:-1000,
padding:padding
}).text(txt);
$span.appendTo('body');
return $span.width();
}
To nie działa na mnie w przeglądarce Firefox 42 – fffred
- 1. Jak przesłać formularz przy wejściu, gdy obszar tekstowy jest ustawiony?
- 2. Jak utworzyć obszar tekstowy o rozmiarze TinyMCE?
- 3. Jak wykryć, kiedy obraz jest nieostry?
- 4. Ten obszar tekstowy o wartości zerowej
- 5. Jak wykryć, kiedy użytkownik aktywnie przewija?
- 6. Jak mogę automatycznie wykryć serwer proxy?
- 7. Jak wykryć, kiedy urządzenie audio jest odłączone w CoreAudio?
- 8. Jak wykryć, kiedy mathjax jest w pełni załadowany?
- 9. Znajdź, kiedy linia została usunięta
- 10. Tekst zastępczy wybiega poza obszar tekstowy w Safari?
- 11. Kiedy jest automatycznie wydany autoreleased obiekt?
- 12. Jak usunąć biały obszar w emacs?
- 13. Jak mogę wykryć, kiedy dysk flash jest podłączony pod Linuksem?
- 14. Android WIFI Jak wykryć, kiedy dostępne jest konkretne połączenie WIFI
- 15. Jak mogę wykryć, kiedy suwak XAML jest ukończony?
- 16. Jak wykryć, kiedy zmieniono rozmiar UIView?
- 17. Jak wykryć, kiedy XHR zwraca buforowany zasób?
- 18. Jak możemy wykryć, kiedy użytkownik zamyka przeglądarkę?
- 19. Kiedy należy utworzyć obszar roboczy TFS?
- 20. Jak wykryć, kiedy UITextField stanie się pusty
- 21. Jak wykryć, kiedy aplikacja traci ostrość?
- 22. Jak wykryć, kiedy zmienna zmienia wartość
- 23. Jak wykryć, kiedy połączenie WiFi (re) się łączy?
- 24. Jak mogę automatycznie wykryć oszczędności światła dziennego w PHP?
- 25. Jak mogę osadzić obszar tekstowy w innym polu tekstowym w HTML?
- 26. javascript + PhoneGap - jak wykryć, kiedy w aktywnej rozmowy telefonicznej
- 27. Jak wykryć, kiedy użytkownik zakończył pobieranie pliku w php
- 28. Nie można automatycznie wykryć adresu e-mail
- 29. Czy urządzenie Flexbox może wykryć, kiedy element elastyczny jest opakowany?
- 30. Mapy Androida v2 stają się niskiej jakości, gdy obszar mapy jest automatycznie przenoszony
jeśli pójdziesz na dno wówczas zmiany scrollHeight, ale nie sądzę, po prostu owijania sama nic nie robi . mam nadzieję, że się mylę. – dandavis
Pomyślałem, że będę mógł użyć ['Range.getBoundingClientRect'] (https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect), nie można wykonać działającego przykładu. Możesz spróbować skopiować wartość '