co konkretnie dzieje sie po naciśnięciu enter w inpucie typu tekstowego albo numerycznego?

Przepraszam, że zawracam głowę, ale piszę właśnie formularz, który działa zasadniczo niezupełnie tak jak bym chciał.

1. Po pierwsze ten formularz niczego nie wysyła dalej i tak ma być. Dlatego zdjąłem mu action i method (szukając przyczyny niepowodzeń, o których niżej)
2. Po drugie, wciśnięcie enter w polu tekstowym powoduje przeładowanie strony .
3. Po trzecie, choć przypisałem formularzowi jako całości cos takiego:

const form = document.getElementById('queryForm');
form.addEventListener('change', function() {
    console.log('Hi!');
});

to o ile radio guziki powodują, co trzeba, to już wpisywanie czegokolwiek w pole tekstowe już nie.
I tu pojawia się pytanie. Z 3 wynikałoby, że naciskając tam enter, wywołuję jakąś funkcję. Pytanie, którą konkretnie? - interesuje mnie to z praktycznej przyczyny - chciałbym nadpisać jej zachowanie. Jednak nie wiem ani, czy jest to funkcja formularza ani, czy pola. Nie wiem też jaka - domyślam się, że pewnie submit, ale chciałbym, żeby ktoś to skomentował.
Założenie jest takie, że ten formularz ma NIE MIEĆ guzika submit. Dziwaczne, ale tak chcę. Nie będę miał nic przeciwko sytuacji, kiedy każda zmiana w polu tekstowym wywoła sczytanie danych (do tego jest już działająca funkcja, nie zamieszczam, żeby nie zaciemniać). Nie mam nic przeciwko sytuacji, w której sczytanie nastąpi po kliknięciu w enter w polu tekstowmy, jeżeli nie spowoduje to przeładowania stony. Pytanie tylko - co przy kliknięciu w ten enter się dzieje - jakbym wiedział pewnie bym poradził sobie z nadpisaniem.

<form id = 'queryForm' name = 'input' >
                <h2>Sortuj po</h2>
                <ul id='radioInputs'>
                
                    <li><input id = 'date'  name = 'sort' type="radio" value ='date'> dacie wydania</li>
                    <li><input id = 'author' name = 'sort' type="radio" value ='author'> nazwisku autora</li> 

                </ul>
             
                <ul id='textInput'>
                    <li>More<input value ='' name ='textInput' id='pageQueryInput' type="text"> strong</li>
                </ul>
                <button class="btn btn-secondary d-block mx-auto" type='reset'>Wyczyść</button>
            </form>

Jak możesz to wrzuć to na jsfiddle.net. Teraz jestem na placu zabaw, ale później postaram się coś podziałać w temacie.

Mogę tak zrobić, ale to jest ogólnie raczej długie, to co napisałem to mały fragment. Nie można jakoś 'teoretycznie' wywnioskować jaki handler się odpala? Jak nie to wrzucę to raczej na Gita. To są trzy pliki, może być trudno to sensownie zredukować

Krajeski napisał(a):

Mogę tak zrobić, ale to jest ogólnie raczej długie, to co napisałem to mały fragment. Nie można jakoś 'teoretycznie' wywnioskować jaki handler się odpala? Jak nie to wrzucę to raczej na Gita. To są trzy pliki, może być trudno to sensownie zredukować

Nie ma sprawy, nie pali mi się z tym, a już na pewno nie na tyle, żeby komukolwiek przerywać zabawę z dzieckiem. Sam jedną odchowałem( prawie), to wiem jak to jest.

Mojej jest powoli coraz bliżej do usamodzielnienia - 14 lat i chyba jest z tych, które będą się chciały wyrwać jak najszybciej. A, jak kiedyś spojrzysz na to co napisałem - ja tam poza handlerkiem, którego cytuje, nie zawiesiłem nic innego, to jest jakaś własna metoda forma czy inputa.

Jeżeli formularz ma jedno pole wejściowe i ma ono fokus to nastąpi niejawne przesłanie formularza. Jeżeli pół wejściowych jest więcej nic się nie wydarzy. Aby ustawić inną akcje dla Enter trzeba zablokować domyślną akcje przeglądarki e.preventDefault() i po wykryciu keypress klawisza nr 13 ustawić swoje zadanie. Nasłuchiwanie ustaw na konkretne kontrolki.

1. To, że zdejmiesz mu action i method w zasadzie nie ma znaczenia dla tego co robisz, równie dobrze mogłyby zostać, no ale po co.

2. Powoduje i tak ma być, nieważne że nie ma gdzie tego wysłać. Wynika to ze specyfikacji. Jeśli nie chcesz, aby strona się przeładowywała na enter, to masz dwie możliwości. Albo możesz zablokować event keydown przy wciśnięciu enter na inpucie. Czyli:

form.addEventListener('keydown', (event) => {
    if (e.keyCode === 13) {
        event.preventDefault();
    }
});

Albo (lepsza opcja), zablokować event submit na formularzu

form.addEventListener('sumbit', (event) => {
    event.preventDefault();
});

3. Event change działa także na polu tekstowym, ale tylko wtedy kiedy pole to traci focus. Wpisz byle co w formularzu, potem kliknij myszką gdzieś obok (byle gdzie) i zauważysz dostaniesz swoje Hi! od konsoli. Tak jest w specyfikacji i tak ma to działać. Natomiast to czego szukasz to event input, podepnij input zamiast change do całego formularza i zacznie działać przy wpisywaniu pojedynczych znaków. Powinno się odpalać także przy radio guzikach.
   Niestety to, że powinno to nie znaczy, że zawsze działa. Działa w chrome i firefoxie. Ale miało problemy chyba w Edge czy w Safari, nie wspominam nawet o IE. Więc co robić, jak żyć? Ja to robię tak, podpinam dwa eventy. Pod pole tekstowe podpinam input, natomiast pod pozostałe (radio, checkbox) change i właściwie działa prawie wszędzie.

Hej, a nie możesz się po prostu pozbyć form? Jeżeli zostawisz sam input i button, to strona nie będzie się przeładowywać, ale pola formularza i przycisk będą widoczne i aktywne. Później wystarczy, że w JS oprogramujesz sobie zdarzenie na zmianę w input i będziesz miał dokładnie to czego potrzebujesz.

Zrobione w zasadzie według tego sposobu z minimalnymi modyfikacjami i jest OK.

m31 napisał(a):

1. To, że zdejmiesz mu action i method w zasadzie nie ma znaczenia dla tego co robisz, równie dobrze mogłyby zostać, no ale po co.

2. Powoduje i tak ma być, nieważne że nie ma gdzie tego wysłać. Wynika to ze specyfikacji. Jeśli nie chcesz, aby strona się przeładowywała na enter, to masz dwie możliwości. Albo możesz zablokować event keydown przy wciśnięciu enter na inpucie. Czyli:

form.addEventListener('keydown', (event) => {
    if (e.keyCode === 13) {
        event.preventDefault();
    }
});

Albo (lepsza opcja), zablokować event submit na formularzu

form.addEventListener('sumbit', (event) => {
    event.preventDefault();
});

3. Event change działa także na polu tekstowym, ale tylko wtedy kiedy pole to traci focus. Wpisz byle co w formularzu, potem kliknij myszką gdzieś obok (byle gdzie) i zauważysz dostaniesz swoje Hi! od konsoli. Tak jest w specyfikacji i tak ma to działać. Natomiast to czego szukasz to event input, podepnij input zamiast change do całego formularza i zacznie działać przy wpisywaniu pojedynczych znaków. Powinno się odpalać także przy radio guzikach.
   Niestety to, że powinno to nie znaczy, że zawsze działa. Działa w chrome i firefoxie. Ale miało problemy chyba w Edge czy w Safari, nie wspominam nawet o IE. Więc co robić, jak żyć? Ja to robię tak, podpinam dwa eventy. Pod pole tekstowe podpinam input, natomiast pod pozostałe (radio, checkbox) change i właściwie działa prawie wszędzie.