Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

[jQuery] Zdarzenie keypress i event.preventDefault()

Tworzenie dynamicznych stron internetowych z zastosowaniem JavaScript, jQuery, Ajax. Dowiedz się jak to zrobić, znajdź rozwiązania swoich problemów.

[jQuery] Zdarzenie keypress i event.preventDefault()

Post 11.11.2011, 12:24:09

Napisałem taki formularz:
Kod: Zaznacz cały
<form method="get" action="">
      <input type="text" name="">
      <input type="text" name="">
      <input type="text" name="">
      <textarea value=""></textarea>
      <input type="reset">
   </form>
   <p id="chars">Pozostało Ci jeszcze 10 znaków</p>
oraz jQuery, które blokować wprowadzanie danych do textarea po wpisaniu 10-ciu znaków ale tak opcja nie działa. Dlaczego?
Kod: Zaznacz cały
$().ready(function() {
   $("textarea").bind({
      keypress:function() {
               var char   =10;
               var txt      =$(this).val();
               var lTxt   =txt.length;
               var pos      =char-lTxt;
               if(char>=lTxt) {
                  $("#chars").text("Pozostało Ci jeszcze "+pos+" znaków");   
               } else {
                  event.preventDefault();   
               }
            }               
   });               
});
pehaper
Posty: 56
Dołączył(a): 26.09.2011

Re: [jQuery] Zdarzenie keypress i event.preventDefault()

Post 11.11.2011, 12:39:14

Brakuje Ci zmiennej event. W IE jest ona globalna, ale w innych przeglądarkach juz nie
Kod: Zaznacz cały
$().ready(function() {
   $("textarea").bind({
      keypress:function(event) {
               var char   =10;
               var txt      =$(this).val();
               var lTxt   =txt.length;
               var pos      =char-lTxt;
               if(char>=lTxt) {
                  $("#chars").text("Pozostało Ci jeszcze "+pos+" znaków");   
               } else {
                  event.preventDefault();   
               }
            }               
   });               
});
Dziękuję wszystkim za lata współpracy, ciekawych pytań i dyskusji. Będę wspominał to forum z wielkim sentymentem • kukawski.pl
Avatar użytkownikakuku
Rafał Kukawski

410 Gone
410 Gone

Posty: 19894
Dołączył(a): 14.04.2002

Re: [jQuery] Zdarzenie keypress i event.preventDefault()

Post 11.11.2011, 13:00:19

racja, zgadza się. Dziwne bo w książce nie ma mowy o implementacji tej zmiennej. Myślałem, że event to jakiś obiekt a preventDefault() to jego metoda ale sie pomyliłem.

ale dlaczego aktywowaniu metody preventDefault() wszystkei czynności edytorskie na tym polu są zablokowane? Nie da się nawet zmienic pozycji kursora myszki czy też po prostu wymazać znak

a poza tym widzę, ze numeracja znaków jest zawyżana o jeden znak przez co konieczna jest dekrementacja chocby w taki sposób:
Kod: Zaznacz cały
var pos=char-lTxt-1;
No chyba, ze się mylę i poszedłem gdzieś na około. Co sądzisz o tym rozwiązaniu ?
pehaper
Posty: 56
Dołączył(a): 26.09.2011

Re: [jQuery] Zdarzenie keypress i event.preventDefault()

Post 11.11.2011, 13:27:46

nie, nie pomyliłeś się. W JS istnieje pojęcie obiektu zdarzenia, który ma metodę preventDefault. Kwestia tylko, jak się do tego obiektu dobrać. Zwykle obiekt ten jest przekazywany jako pierwszy argument funkcji obsługującej zdarzenie. Dlatego w powyższym przykładzie nazwałem ten argument event. Jego nazwa może być dowolna. Wyjątkiem jest stary IE < 9, który ma swój model obiektowy, a tam obiekt zdarzenia jest globalnym obiektem (window.event).

ale dlaczego aktywowaniu metody preventDefault() wszystkei czynności edytorskie na tym polu są zablokowane? Nie da się nawet zmienic pozycji kursora myszki czy też po prostu wymazać znak

bo preventDefault() blokuje domyślną akcję przeglądarki. Gdy kursor jest w polu tekstowym, domyślną akcją dla wciśniętego klawisza "a" jest wpisanie tego znaku. Dla wciśniętego klawisza strzałki, przejście w wybranym kierunku, dla "backspace" usunięcie jednego znaku. Jeśli chcesz zezwolić na wykonywanie pewnych czynności, to musisz filtrować akcje użytkownika i tylko w określonych przypadkach wywoływać preventDefault. Obiekt zdarzenia przechowuje wszystkie informacje na temat wciśniętych klawiszy.

a poza tym widzę, ze numeracja znaków jest zawyżana o jeden znak przez co konieczna jest dekrementacja chocby w taki sposób:

bo keypress następuje zanim znak trafi do pola tekstowego... więc długość tekstu w polu tekstowym jest krótsza o aktualnie wpisywany znak. Stąd konieczność dekrementacji limitu znaków o jeden.
Dziękuję wszystkim za lata współpracy, ciekawych pytań i dyskusji. Będę wspominał to forum z wielkim sentymentem • kukawski.pl
Avatar użytkownikakuku
Rafał Kukawski

410 Gone
410 Gone

Posty: 19894
Dołączył(a): 14.04.2002

Re: [jQuery] Zdarzenie keypress i event.preventDefault()

Post 13.11.2011, 07:44:30

bo preventDefault() blokuje domyślną akcję przeglądarki. Gdy kursor jest w polu tekstowym, domyślną akcją dla wciśniętego klawisza "a" jest wpisanie tego znaku. Dla wciśniętego klawisza strzałki, przejście w wybranym kierunku, dla "backspace" usunięcie jednego znaku. Jeśli chcesz zezwolić na wykonywanie pewnych czynności, to musisz filtrować akcje użytkownika i tylko w określonych przypadkach wywoływać preventDefault. Obiekt zdarzenia przechowuje wszystkie informacje na temat wciśniętych klawiszy.
Poczytałem nieco o tym i wymyśliłem takie rozwiązanie:
Kod: Zaznacz cały
$().ready(function() {
   $(".forms input").bind({
      keypress:function(e) {
         var   lChar      =10;
         var txt         =$(this).val();
         var txtLength   =txt.length;
         var   pos         =lChar-txtLength-1;
         
         if(lChar>txtLength) {
            $(this).parent().next().text("Pozostało Ci jeszcze "+pos+" znaków");
         } else {         
            if(e.which!=8 && e.which!=127) {
               e.preventDefault();
            }               
         }
      },
      focus:function() {
         $("input").css({"background":"none"});
         $(this).css({"background":"red"});
      },
      change:function() {
         $(this).css({"border":"3px solid blue"});   
      }
   });
});   
W tabeli kodów ASCII backspace jest oznaczony cyfrą 8 a delete 127 ale sę w tym wszystkim jest taki, że backspace jest przepószczany a delete nie. Drugą sprawą jest lewa i prawa strzałka klawiatury. Jakie mają kody ASCII te klawisze bo w tabeli kodów ASCII nie mogę ich znaleźć ;)
pehaper
Posty: 56
Dołączył(a): 26.09.2011

Re: [jQuery] Zdarzenie keypress i event.preventDefault()

Post 13.11.2011, 12:04:08

Problem ze zdarzeniami klawiaturowymi polega na tym, że w każdej przeglądarce inaczej to wygląda. Niektóre reagują zdarzeniem na klawisze typu strzałka, backspace czy delete, inne nie reagują. Niektóre ustawiają pole .which, inne zwracają najczęściej 0. Ale jest jeszcze pole .keyCode. Pobaw się tym przykładem: http://jsfiddle.net/kLRAK/
W Firefoksie klawisze strzałek dają mi keyCode kolejno dla lewo = 37, góra = 38, prawo = 39, dół = 40.

Jeszcze pytanie, dlaczego wykonujesz to?
Kod: Zaznacz cały
focus:function() {
         $("input").css({"background":"none"});
         $(this).css({"background":"red"});
      },

nie lepiej w CSSie użyć pseudoklasy :focus?

Kod: Zaznacz cały
input:focus { background-color: red; }
Dziękuję wszystkim za lata współpracy, ciekawych pytań i dyskusji. Będę wspominał to forum z wielkim sentymentem • kukawski.pl
Avatar użytkownikakuku
Rafał Kukawski

410 Gone
410 Gone

Posty: 19894
Dołączył(a): 14.04.2002


Powrót do JavaScript


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 20 gości

Subskrypcja

Mamy 54313 zarejestrowanych użytkowników.
Najnowszy użytkownik: JaimeTRETS


Nasi użytkownicy napisali:

  • 941555 wiadomości
  • w 250593 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)