[JavaScript]automatyczne przepisywanie znakow Opcje

[pakolord]

Witam, ucze sie js i narazie nie wszystko jest mi jasne, czy ktos moglby mi powiedziec jak ulozyc funkcje tak aby pisane znaki w jednym oknie tekstowym byly na bierzaco przepisywane do drugiego okna badz diva bez odswiezania strone cos na zasadzie http://jsbin.com . Probowalem z onchange itd ale cos niebardzo mi wychodzi.

Ten post edytował pakolord 16.07.2015, 15:14:41

[nospor]

Co do kodu to pokaz co stworzyles

[Comandeer]

@nospor czekam na wersję tego obrazka z cytatem stulecia z Heliona: "Java ma się do JavaScript jak szynka do hamburgera"

@pakolord polecam sprawdzić zdarzenie input, bo właśnie do takich rzeczy powstało. Ale i tak pokaż kod

[pakolord]

Jak pisalem dopiero sie ucze wiec narazie sam jestem w stanie napisac cos takiego ale wyswietla mi value dopiero po odswiezeniu strony

[HTML] pobierz, plaintext 
<input type="text" name="abc" id="abc" />
 
<script type="text/javascript">
 
var abc = document.getElementById('abc').value;
document.getElementById('abc').onchange = document.write(abc);
 
 
</script>
[HTML] pobierz, plaintext 

Wyczytalem aby cala akcja wykonywala sie bez przeładowania strony, nalezy skorzystac z AJAX czy moge to ominac

Ten post edytował pakolord 16.07.2015, 14:41:34

[Skie]

Twój JS wykonuje się zaraz po wczytaniu strony, dokładnie jeden raz. W 5 linii, pobierasz wartość inputa, która w tym momencie zależnie od przeglądarki będzie pustym stringiem lub undefined. Zapisujesz tę wartośc, a następnie w linii 6 ustawiasz handlera zdarzenia onchange na funkcję która podmieni zawartość strony na zawartość tej zmiennej - czyli wyświetli Ci się pusta strona i wydaje Ci się , że się ona przeładowała. Nie powinieneś używać document.write!

Kod powinien wyglądać tak:

Kod

document.getElementById('id1').onchange = function() {
    var value = this.value;
    var output = document.getElementById('id2');
    
    output.value = value;
};

Przypisujesz na onchange funkcje, która przy każdej zmianie pobiera wartość inputa o id=id1 i wpisuje jego wartość do inputa o id=id2.
'this' wykorzystane w środku funkcji odnosi się do elementu, na którym się wykonał handler - czyli input o id=id1.

[Comandeer]

Osobiście zmieniłbym onchange na oninput - onchange odpali się dopiero po kliknięciu poza polem, w którym piszemy. No i mimo wszystko lepiej eventy przypinać przez addEventListener → https://developer.mozilla.org/en-US/docs/We...ddEventListener

[kafowi]

Twój JS wykonuje się zaraz po wczytaniu strony, dokładnie jeden raz. W 5 linii, pobierasz wartość inputa, która w tym momencie zależnie od przeglądarki będzie pustym stringiem lub undefined. Zapisujesz tę wartośc, a następnie w linii 6 ustawiasz handlera zdarzenia onchange na funkcję która podmieni zawartość strony na zawartość tej zmiennej - czyli wyświetli Ci się pusta strona i wydaje Ci się , że się ona przeładowała. Nie powinieneś używać document.write!

Kod powinien wyglądać tak:

Kod

document.getElementById('id1').onchange = function() {
    var value = this.value;
    var output = document.getElementById('id2');
    
    output.value = value;
};

Przypisujesz na onchange funkcje, która przy każdej zmianie pobiera wartość inputa o id=id1 i wpisuje jego wartość do inputa o id=id2.
'this' wykorzystane w środku funkcji odnosi się do elementu, na którym się wykonał handler - czyli input o id=id1.

Ja bym to zrobił tak:
- http://jsfiddle.net/kafowi/zcfjavn5/2/
Nie trzeba klikać poza input by się zaktualizowało.

[kapslokk]

Ja bym zrobił zamiast onkeyup: oninput
Dlatego, że w przypadku onkeyup nie możemy np. zrobić ctrl+a, a później backspace

[kafowi]

Ja bym zrobił zamiast onkeyup: oninput
Dlatego, że w przypadku onkeyup nie możemy np. zrobić ctrl+a, a później backspace

Sprawdzałeś? bo mnie działa bez zarzutu. Myślę, że chodziło o użycie onkeypress albo onkeydown.

[kapslokk]

Zdecydowanie sprawdzałem i u mnie na ff 39.0 nie bangla, stąd też mój post

@edit
Sprawdziłem z ciekawości na drugim komputerze i tam wszystko jest ok. Być może ten konkretny ma z tym jakiś problem. Sorry za zamieszanie.

Ten post edytował kapslokk 16.07.2015, 17:31:14

[Comandeer]

Ale do obsługi inputów jest input. Przy keyup można się nadziać na kilka różnych rzeczy typu brak obsługi wklejania z poziomu menu kontekstowego: http://jsfiddle.net/Comandeer/1kn9kh0z/
Używajmy odpowiednich zdarzeń jeśli jest taka możliwość. key… są do obsługi klawiatury (np w apkach), do obsługi pól formularza są inne, lepsze eventy