Formularz. Funkcja TAB na klawiszu ENTER.

Question

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/

Answer 1

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.

Comments

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

---

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.

---

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... :)

---

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. 

---

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."

---

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

---

Hej, dzięki za pomoc. Zastosowałem bibliotekę tabbable.

Answer 2

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.

Comments

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

---

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.

---

A też tak uważam... Ale nie jestem do kontaktów z klientami tylko do czarnej roboty...