• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Formularz. Funkcja TAB na klawiszu ENTER.

VPS Starter Arubacloud
+2 głosów
1,321 wizyt
pytanie zadane 6 maja 2016 w JavaScript przez Dr. Zawijas Użytkownik (610 p.)

Cześć, jak świat światem, naciskanie przycisku TAB podczas wypełniania formularza, kończyło się przejściem do kolejnego pola. I o to mi chodzi. Tylko, że musi to być przycisk ENTER...

Próbowałem już chyba wszystkiego. Przeczytałem kilkanaście postów na forach, niestety żadne z proponowanych tam rozwiązań u mnie nie działa.

próbowałem np.:

$('input,textarea').keypress(function(e){

  if(e.keyCode==13) {
   $(this).nextAll('input,textarea').first().focus();
  }
});

Rozumiem, że muszę zablokować funkcję klawisza TAB (preventdefault()) i nadać jego funkcję klawiszowi ENTER?

Próbowałem nawet sprawdzać czy wciśnięty został TAB = 9 i jeżeli tak, to wykonać ENTER=13.

I nic...

Projekt jest w pełni obiektowy... na Symfony2... Nie mam dostępu do zwykłych inputów...
A przynajmniej nie wiem jak się do nich dostać... Ta "nowa" funkcja Entera ma działaś na wszystkim oprócz pól textarea.

Zobrazowanie problemu - Chodzi mi dokładnie o coś takiego:
http://jsfiddle.net/hxZSU/1/

2 odpowiedzi

+1 głos
odpowiedź 6 maja 2016 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 8 maja 2016 przez Dr. Zawijas
 
Najlepsza

Coś takiego?

https://jsfiddle.net/rdvm3L0p/1/

W jednym EventListenerze blokujesz domyślne zachowanie TAB.

W drugim pobierasz wartość atrybutu data-index inputa aktualnie posiadającego focus i bierzesz też wartość data-index następnego inputa. Gdy zostanie wciśnięty ENTER - ustawiasz focus na następny input. Tylko musisz popracować nad tym IF, żeby przy ostatnim input nie pokazywał błędu.

komentarz 6 maja 2016 przez Dr. Zawijas Użytkownik (610 p.)
No tak, nie byłoby problemu, ale nie mogę nadać inputom atrybutu (data-index="x")... A przynajmniej nie wiem w jaki sposób to zrobić. Powtarzam, że to jest Twig w Symfony i Bootstrap. Nie mam tu pola input...
komentarz 6 maja 2016 przez ScriptyChris Mędrzec (190,190 p.)

W linku, który podałeś jako przykład tego co chcesz osiągnąć, są pola input Stąd taka moja propozycja rozwiązania problemu. Nie znam się na PHP (Symphony).

Podaj proszę, jakie atrybuty mają Twoje pola do wprowadzania danych? Jeśli chcesz to robić na JavaScript (o ile nie pomyliłeś działów :) ), to potrzeba Ci czegoś, po czym będziesz łapać i zliczać kolejne inputy (czy tam pola, które masz w formularzu) i na tej podstawie ustawiał focus następnym polom.

komentarz 6 maja 2016 przez Dr. Zawijas Użytkownik (610 p.)
Hej, udało mi się jakimś cudem dodać atrybuty 'data-index'. Teraz już z górki.

Zablokowałem TAB i są atrybuty.

Problem wygląda tak. To nie tylko inputy, ale i selecty oraz checkboxy.

1. Jak dodać do twojej propozycji skryptu typy select i checkbox?

2. Jak zablokować enter i dać mu tą nową funkcję?
On po kliknięciu zapisuje formularz. Jak to zmienić?

Proszę o pomoc... Siedzę nad tym czwarty dzień... po 8h...
Jestem biednym php'owcem... :)
komentarz 6 maja 2016 przez ScriptyChris Mędrzec (190,190 p.)

Pokaż kod.

1. Jak dodać do twojej propozycji skryptu typy select i checkbox?

Po prostu dodaj. Jeśli w elementach <option> (znajdują się wewnątrz <select>) nie ma dynamicznie generowanej zawartości, to nadając wszystkim elementom formularza atrybut data-index z kolejną cyfrą, ten skrypt powinien działać.

Chociaż dla select i checkbox trzeba by zmieniać atrybuty selected / checked.

2. Jak zablokować enter i dać mu tą nową funkcję?
On po kliknięciu zapisuje formularz. Jak to zmienić?

Zapisz ev.preventDefault(), chyba że nie działa, to - powrót do początku tego komentarza - pokaż kod. 

komentarz 6 maja 2016 przez Dr. Zawijas Użytkownik (610 p.)
edycja 8 maja 2016 przez Dr. Zawijas

Hmm. Tu jest fragment.
Skopiowane z podglądu źródła - bo inaczej jest Twig.

 

 <div class="">
                    <div id="" class="" role="">
                        <div  class=""><label for="" class="">
            &nbsp;<span class="">*</span></label><div class="col-md-10"><select id="" name="" class="" form-control" data-index="1"><option value="0"  selected="selected">1</option><option value="1" ></option><option value="3" ></option><option value="" ></option><option value="" ></option><option value="5" </option><option value="6" ></option><option value="7" ></option></select></div></div>
                    <div  class=""><label for="" class="">
            &nbsp;<span class="">*</span></label><div class="col-md-10"><input type="text" id="" name="" required="required" class="" value="" /></div></div>
                    <div  class=""><label for="" class="">
            &nbsp;<span class="">*</span></label><div class="col-md-10"><input type="text" id="" name="" disabled="disabled" required="required" data-index="2" class="" value="04.05.2016" /></div></div>

 

A tu mam skrypt do tego...

 var form = document.querySelector('form'),
    inputs = document.querySelectorAll('input');

    form.addEventListener('keydown',function(ev)
    {
        if (ev.keyCode === 9)
        ev.preventDefault();
    })

    form.addEventListener('keypress', function(ev)
    {
        var current = Number(ev.target.getAttribute('data-index')),
        next = form.querySelector('[data-index="' + (current + 1) + '"]');
      
      if (ev.keyCode === 13)    
      {
        next.focus();
        ////console.log(next.getAttribute('data-index'), '/' , inputs.length);
      }
    });

Jak dodać te atrybuty? Po przecinku?
 

inputs = document.querySelectorAll('input, select, checkbox');

Co to znaczy?
"zmieniać atrybuty selected / checked."

komentarz 6 maja 2016 przez ScriptyChris Mędrzec (190,190 p.)

Coś takiego: http://codepen.io/ChrissP92/pen/mPaZYM?editors=1010

Ale wybór daty jest zablokowany, więc nie działa. Atrybut data-index jest zapisany tylko dla pierwszego i ostatniego pola (select i zablokowany input dla kalendarza).

Jak dodać te atrybuty? Po przecinku? 

Możesz, bo querySelector akceptuje selektory takie jak są w CSS.

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

Tylko żeby podpiąć EventListener, musisz mieć pojedynczy element, więc albo pętla, albo podepnij pod 1 element (najlepiej rodzic) i za pomocą event.target badaj co się dzieje i kieruj wszystkim (poprzez IF).

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Co to znaczy? 
"zmieniać atrybuty selected / checked."

Wewnątrz <select> masz pola <option>, których kliknięcie ustawia im wartość selected (true lub false), zaś zaznaczenie <checkbox> ustawia mu atrybut checked.

<SELECT> oraz <OPTION>:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

https://www.w3.org/TR/html-markup/select.html

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option

https://www.w3.org/TR/html-markup/option.html

<CHECKBOX>:

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/checkbox

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/checked

https://www.w3.org/TR/html-markup/input.checkbox.html

komentarz 13 maja 2016 przez Dr. Zawijas Użytkownik (610 p.)
Hej, dzięki za pomoc. Zastosowałem bibliotekę tabbable.
+2 głosów
odpowiedź 6 maja 2016 przez Comandeer Guru (604,400 p.)
Widzę, że Krzycho92 Ci już pomógł, więc ja tylko zapytam: po co Ci to? Enter do tego nie służy i to jest pogwałcenie podstawowych zasad a11y i UX. Jak jeszcze przypięcie akcji Taba pod Enter da się wyjaśnić, tak zablokowanie domyślnej akcji Taba jest po prostu karygodne.
komentarz 6 maja 2016 przez Dr. Zawijas Użytkownik (610 p.)
Hej, jeszcze nie zacząłem działać w związku z ostatnią odpowiedzią krzycha...
Ale tak, bardzo pomocny :)

A ten cały układ to wymysł klienta jest...
komentarz 6 maja 2016 przez Comandeer Guru (604,400 p.)
A nie da się klientowi przetłumaczyć…? Osobiście nudziłbym mu o tym tak długo i tak mocno tłumaczył, czemu robienie takiej rzeczy jest nie tyle złe, co po prostu bezmiernie głupie, że w końcu albo by mnie wywalił drzwiami, albo zgodził się na moją sugestię ;)

To trochę smutne, że czasami trzeba posuwać się do takich działań… Za bardzo ostatnio webdev poszedł w efektowność zamiast w efektywność. Ale ok, nvm.
komentarz 6 maja 2016 przez Dr. Zawijas Użytkownik (610 p.)
A też tak uważam... Ale nie jestem do kontaktów z klientami tylko do czarnej roboty...

Podobne pytania

0 głosów
1 odpowiedź 435 wizyt
0 głosów
1 odpowiedź 432 wizyt
pytanie zadane 16 września 2018 w Java przez ILikeJava Obywatel (1,230 p.)
0 głosów
0 odpowiedzi 408 wizyt

92,840 zapytań

141,781 odpowiedzi

320,856 komentarzy

62,172 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...