jquery - keypress / keydown

jquery - keypress / keydown
Xoxepin
Xoxepin
Xoxepin
Xoxepin
  • Rejestracja:około 9 lat
  • Ostatnio:ponad 5 lat
  • Postów:80
0

Witam, mam wręcz absurdalny problem. Task wygląda tak:

Wpisuje do inputa jakieś słowo, po WDUSZENIU przycisku enter na klawiturze zawartośc ma pojawić się niżej, napisałem kilka rozwiazań tego "skryptu" i cały czas po wduszeniu ENTER zawartość pojawia się na dosłownie ułamek sekundy i znika (nie zależnie czy uzyje keypress, down itp)

Tak sobie napisałem proste zdarzenie na kliknięcie i jest ok:

Kopiuj
$(document).ready(function () {
  $('#button').click(function() {
    var toAdd = $('input[name=ListItem]').val();
    $('ol').append('<li>' + toAdd + '</li>');
  });

Przykład z guzikiem:

Kopiuj
  $('input[name=ListItem]').keydown(function(event) {
    if(event.which == 13) {
      $('ol').append('<li>' + 'ssss' + '</li>');
    };
  });

Jakieś pomysły?

LukeJL
jaką masz strukturę kodu HTML?
LukeJL
jeśli używasz jQuery od obsługi DOM to kod HTML jest częścią problemu i wypadałoby go wkleić
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Markuz
MA
Markuz
MA
  • Rejestracja:prawie 17 lat
  • Ostatnio:9 dni
  • Postów:644
0
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Xoxepin
Xoxepin
Xoxepin
Xoxepin
  • Rejestracja:około 9 lat
  • Ostatnio:ponad 5 lat
  • Postów:80
0
Kopiuj
      <form name="toDoList">
        <input type="text" name="ListItem" placeholder="xxx...">
      </form>
LukeJL
przecież tu nie ma elemetu <ol> do którego się odwołujesz przez selektor w jQuery
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
LukeJL
LukeJL
LukeJL
LukeJL
  • Rejestracja:około 11 lat
  • Ostatnio:minuta
  • Postów:8423
0

U mnie działa :) https://jsfiddle.net/wc0vfo97/

więc przypuszczam, że to faktycznie coś związanego ze strukturą HTMLu jaką masz na stronie, skoro sam kod JS działa.

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Xoxepin
Xoxepin
Xoxepin
Xoxepin
  • Rejestracja:około 9 lat
  • Ostatnio:ponad 5 lat
  • Postów:80
0
Kopiuj
<form name="toDoList">
        <input type="text" name="ListItem" placeholder="Add your todo's here...">
      </form>

      <div id="button">Add</div>
    </div>

    <div class="container">
      <h4>Commisioned tasks: </h4>
      <ol>
          <li>Learn C++</li>
      </ol>
    </div>
Kopiuj
  $('input[name=ListItem]').keydown(function(event) {
    if(event.which == 13) {
      $('ol').append('<li>' + 'ssss' + '</li>');
    };
  });
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
LukeJL
LukeJL
LukeJL
LukeJL
  • Rejestracja:około 11 lat
  • Ostatnio:minuta
  • Postów:8423
1

ponieważ masz to w formularzu, po wciśnięciu enter formularz próbuje się wysłać. Żeby zapobiec domyślnej obsłudze eventa, musisz dodać event.preventDefault();

Kopiuj
  $('input[name=ListItem]').keydown(function(event) {
    if(event.which == 13) {
      $('ol').append('<li>' + 'ssss' + '</li>');
      event.preventDefault();
    };
  });
Xoxepin
No ładnie... czyli problem "był" pomiędzy krzesłem a monitorem hehe, wielkie dzięki!
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.

Utwórz konto