</br> w textarea - problem - Forum Pasja Informatyki

pytanie zadane 29 kwietnia 2020 w JavaScript przez Farba Początkujący (440 p.)
zmienione kategorie 29 kwietnia 2020 przez ScriptyChris

Witam. Chciałem uzyskać coś takiego, że po kliknięciu enter dodaje się </br> do textu w textarea i do tego zrobiłem taki skrypt :

const .Tresc_aktualnosci = document.getElementById('.Tresc_aktualnosci');
const Komentarz_tresc = document.getElementById('Komentarz_tresc');
 
.Treść_aktualności.addEventListener('input', ({target}) => Komentarz_tresc.textContent = target.value)

Tylko, że wtedy linijki które same się zawiną w textarea nie mają nałożonego </br>

tam gdzie jest "a" nie dałem enteru, a tam gdzie zaczyna się "b" dałem enter

obrazek:

https://ibb.co/0C1ZF4t

komentarz 29 kwietnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

Po pierwsze, zmienne w JavaScript nie mogą zawierać kropki w nazwie: https://developer.mozilla.org/en-US/docs/Glossary/Identifier - ten kod nie będzie prawidłowo interpretowany.

Po drugie, z kodu nie wynika w którym miejscu dodajesz znacznik </br>.

Mogę wydedukować, że problemem jest użycie textContent zamiast innerHTML, ale nie pasuje mi tutaj target.value, które może odnosić się do elementu .Tresc_aktualnosci.

komentarz 29 kwietnia 2020 przez Farba Początkujący (440 p.)

A czy możesz napisać kod działający w sposób taki jaki chcę albo powiedzieć mniej więcej jak go napisać, skoro ten kod jest zły.

komentarz 29 kwietnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

W prostej postaci możesz w ten sposób:

const textArea = document.querySelector('textarea');

textArea.addEventListener('keypress', (event) => {
  if (event.key === 'Enter') {
    event.target.innerHTML += '<br>';
  }
})

Zamiast selektora textarea użyj ID lub klasy, którą ma u Ciebie <textarea></textarea>, bo - jeśli na stronie masz więcej elementów tego typu - w powyższej formie "enter" będzie obsłużony tylko dla pierwszego (niekoniecznie tego, który chcesz).

komentarz 29 kwietnia 2020 przez Farba Początkujący (440 p.)

Niestety to nie to. Nie dodaje się </br>.

Jak się wejdzie w zbadaj element to pokazuje taki błąd :

br.js:3 Uncaught TypeError: Cannot read property 'addEventListener' of null
at br.js:3

komentarz 29 kwietnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

W którym miejscu umieściłeś skrypt? Jeśli przed elementem <textarea>, to nie zadziała. Najlepiej umieść go przed </body>.

komentarz 29 kwietnia 2020 przez Farba Początkujący (440 p.)

podpiołem go w taki sposób :

<head>

<script type="text/javascript" src="br.js"> </script>

</head>

komentarz 29 kwietnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

Czyli skrypt odpala się raczej zanim <textarea> będzie w DOM. Jak wspomniałem, przenieś podpięcie skryptu niżej.

komentarz 29 kwietnia 2020 przez Farba Początkujący (440 p.)

Twój skrypt chyba nie działa. </br> wciąż się nie dodaje. Ale dzięki za próbę pomocy

komentarz 29 kwietnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

A, zapomniałem że treść <textarea> jest pod property value a nie textContent. Zamień kod w IF na ten:

event.preventDefault(); // jeśli nie chcesz żeby enter przechodził do nowej linii
event.target.value += '<br>';

Działanie całości możesz sprawdzić tu.

komentarz 29 kwietnia 2020 przez Farba Początkujący (440 p.)
edycja 29 kwietnia 2020 przez Farba

Już działa prawie prawidłowo .

Pokazywało się <br> w tekście ale chwile popatrzyłem w internecie i to poprawiłem.

Wystarczyło zrobić tak:

event.target.<br> = '';

Dzięki wielkie.

komentarz 29 kwietnia 2020 przez Farba Początkujący (440 p.)

A czemu nie napisałeś w odpowiedzi? Dał bym Ci naj

komentarz 29 kwietnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

Pokazywało się <br> w tekście

Z tego co zrozumiałem, to chciałeś żeby <br> pokazywało się w tekście i zapis

event.target.value += '<br>';

to właśnie powoduje.

event.target.<br> = '';

To nie jest prawidłowa składnia JavaScript. Co to ma robić?

A czemu nie napisałeś w odpowiedzi?

Bo zacząłem od dopytywania się o szczegóły, których brakowało w opisie problemu.

komentarz 30 kwietnia 2020 przez Farba Początkujący (440 p.)

Więc źle mnie zrozumiałeś. Chciałem żeby dodawało się <br> przy nowej linijce lecz żeby <br> nie było widać

komentarz 30 kwietnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

W takim razie nie rozumiem, co chciałeś osiągnąć. :)

Jeśli pisząc w <textarea> wciśniesz klawisz enter, to tworzysz nową linię, ale w kodzie nie widać znacznika <br> - czyli nie musisz nic implementować żeby działało tak jak piszesz. Jeśli chcesz skonfigurować zachowanie <textarea>, to zapoznaj się z dostępnymi atrybutami, np. wrap, cols, rows.