Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]automatyczne przepisywanie znakow
Forum PHP.pl > Forum > Przedszkole
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 questionmark.gif cos na zasadzie http://jsbin.com . Probowalem z onchange itd ale cos niebardzo mi wychodzi.
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" biggrin.gif

@pakolord polecam sprawdzić zdarzenie input, bo właśnie do takich rzeczy powstało. Ale i tak pokaż kod wink.gif
pakolord
Jak pisalem dopiero sie ucze wiec narazie sam jestem w stanie napisac cos takiego ale wyswietla mi value dopiero po odswiezeniu strony
  1. <input type="text" name="abc" id="abc" />
  2.  
  3. <script type="text/javascript">
  4.  
  5. var abc = document.getElementById('abc').value;
  6. document.getElementById('abc').onchange = document.write(abc);
  7.  
  8.  


Wyczytalem aby cala akcja wykonywala sie bez przeładowania strony, nalezy skorzystac z AJAX czy moge to ominac questionmark.gif
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 addEventListenerhttps://developer.mozilla.org/en-US/docs/We...ddEventListener
kafowi
Cytat(Skie @ 16.07.2015, 16:17:11 ) *
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 smile.gif
kafowi
Cytat(kapslokk @ 16.07.2015, 17:12:33 ) *
Ja bym zrobił zamiast onkeyup: oninput
Dlatego, że w przypadku onkeyup nie możemy np. zrobić ctrl+a, a później backspace smile.gif

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 smile.gif

@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.
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
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.