Как запретить кнопку с типом submit реагировать на enter?

Андрей, если вы имеете ввиду про иконку с крестиком, то в десктопной версии ее не должно быть

Как запретить кнопку с типом submit реагировать на enter?

Андрей, в декстопной версии иконка с поиском является полноценной кнопкой для отправки



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

Как запретить кнопку с типом submit реагировать на enter?

Андрей,

Добавляю в код "в мобильной версии при показе инпута кнопке делаю type=button"

Т.е. в мобильной версии все таки придется на type=button менять ?

Запустить поиск можно либо enter в инпуте, либо на кнопку поиска нажать (если она будет доступна)

На десктопной версии именно так, но на мобильной версии кнопка поиска играет роль открытия/закрытия инпута и не более

Кнопка-крестик привязана к инпуту. При клике на ней очищает инпут и прячет его (лучше, если пошлет ему событие blur, чтобы активизировать уже существующий механизм)

Здесь вы все верно написали

Как запретить кнопку с типом submit реагировать на enter?

Андрей, вот к этому я и веду, поиск в мобильной версии можно запустить только по клику на клавишу enter

Как запретить кнопку с типом submit реагировать на enter?

Андрей, ну вот я объясняю, что есть кнопка поиска в мобильной версии

Посередине логотип, нажимаю на кнопку и появляется инпут с крестиком:

Далее при клике поэтому крестику - инпут скрывается и появляется снова это:

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

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

Как запретить кнопку с типом submit реагировать на enter?

Андрей, и все таки хотелось окончательно узнать Ваше мнение поэтому поводу )

Как запретить кнопку с типом submit реагировать на enter?

Андрей,

Есть у вас форма поиска на сайте. Заставьте ее работать нормально. Если это кнопка, значит она отправляет запрос, перегружая страницу. У вас так работает обычная версия?

Все верно вы написали про декстопную версию, но в мобильной версии эта же кнопка не играет роль отправки данных!

А у вас одна кнопка кучу ролей играет. Да поставьте их две и скрывайте лишнюю!

А это как ?
И все таки не проще на type="button" в мобильной версии кнопку сменить ?

Как запретить кнопку с типом submit реагировать на enter?

Андрей, ну при клике на иконку поиска открывается инпут:

При клике на крестик инпут закрывается

Как запретить кнопку с типом submit реагировать на enter?

Андрей, текущей кнопки нету:

Как запретить кнопку с типом submit реагировать на enter?

Андрей,

текущая кнопка - это слово искать

как раз таки это placeholder ^D

крестик - несуществующая еще кнопка

Это закрытие инпута )

Как запретить кнопку с типом submit реагировать на enter?

Андрей, мне нужно вот так:

Как запретить кнопку с типом submit реагировать на enter?

Андрей, я имею ввиду вот так: https://codepen.io/Genri_Rus/pen/WNQRmym

Т.е. кнопка в мобильной версии мне не нужна для отправки данных, наверно проще в мобильной версии ее поменять на type="button" ?

Как запретить кнопку с типом submit реагировать на enter?

Андрей, нет

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

Наверно тогда стоит блокировать enter и делать переадресацию с помощью

window.location.reload

Не хватает крестика для очистки инпута одним кликом.

Вот как раз таки у меня кнопка с поиском (при submit) меняется на иконку с крестиком (для закрытия инпута)

Как запретить кнопку с типом submit реагировать на enter?

Андрей, у меня по дизайну она должна быть над инпутом (

Как запретить кнопку с типом submit реагировать на enter?

Андрей, имелось ввиду с абсолютным позиционированием

У меня получается на мобильной версии кнопка над инпутом с z-index, поэтому событие blur некорректно срабатывает:

https://codepen.io/Genri_Rus/pen/WNQRmym

Как запретить кнопку с типом submit реагировать на enter?

Андрей, так не работает: https://codepen.io/Genri_Rus/pen/WNQRmym

Я пытаюсь закрыть инпут по клику на кнопку, а он не закрывается

Как запретить кнопку с типом submit реагировать на enter?

Андрей, я нашел еще одну ошибку

Вот пример: https://codepen.io/Genri_Rus/pen/WNQRmym

Если кнопка спозиционирована абсолютно, то ваш вариант не работает, тогда как в данной ситуации поступить ?

Как запретить кнопку с типом submit реагировать на enter?

Андрей, все таки есть небольшие отличия
Вот: https://codepen.io/Genri_Rus/pen/WNQRmym

Получается при нажатии enter на пустом инпуте отправка все равно происходит, тут наверно нужна доп. проверка на пустоту инпута?

Как запретить кнопку с типом submit реагировать на enter?

Андрей, было бы вообще идеально без e.preventDefault();

Вот изначально у меня тоже была цель, чтобы форма поиска работала точно также, как и на декстопе