Как можно реализовать более правильное поведение кнопки с типом submit?

Question

[Genri_Rus]

Проблема вот в чем, в мобильной версии у меня кнопка с типом submit не должна отправлять никакие данные




Более подробно: https://codepen.io/Genri_Rus/pen/dyYvdpL

Т.е. в декстопной версии у меня кнопка должна работать, а в мобильной версии она лишь служит для закрытия инпута

Как вообще сделать правильно и как это делают на нормальных сайтах ?

Answer 1

[its2easyy]

https://learn.javascript.ru/default-browser-action

Comments

[Genri_Rus]

Т.е вы предлагаете использовать preventDefault() ?

[Антон Шаманов]

Genri_Rus, ну, можешь использовать топорный вариант с return false или удалить у кнопки класс по которому биндится событие

[its2easyy]

Genri_Rus, что то типа

$('button').on('click', function(e){
    if ( window.matchMedia('(max-width: 767px)').matches ){
        e.preventDefault();
        openInput();
    }
})

[Genri_Rus]

Антон Шаманов, мне нужно, чтобы enter срабатывал и в мобильной версии

или удалить у кнопки класс по которому биндится событие

Это как ?

[Genri_Rus]

its2easyy, мне нужно, чтобы enter срабатывал и в мобильной версии

[its2easyy]

Genri_Rus, enter вызывает submit на форме, а нажатие на кнопку click на кнопке, их можно отдельно обрабатывать

[Genri_Rus]

its2easyy, т.е. мне нужно использовать preventDefault(); для кнопки?

[its2easyy]

Genri_Rus, если кнопка не должна делать действие по умолчанию и отправлять форму, то да

[Genri_Rus]

its2easyy, кнопка не должна отправлять форму только на мобильной версии, а на десктопной должна

[its2easyy]

Genri_Rus, лучше заплатите кому-нибудь кто вам это сделает

[Genri_Rus]

its2easyy, я платить никому не собираюсь )