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

Question

[Genri_Rus]

Вообщем вот пример: https://codepen.io/Genri_Rus/pen/XWmpKaX

Если я кликаю на кнопку с типом submit, то у меня появляется поле input
Проблема в том, что если я (после того как нажал на кнопку) кликаю enter, то у меня инпут скрывается и так по кругу

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

Как можно запретить, чтобы кнопка с типом submit не реагировала на enter ?

Answer 1

[Andry]

Вы термины путаете кликаю, нажимаю и фиг поймешь, что вы хотите. Когда же писатели начнут читать ? :)
Каждое предложение - отрывок мысли. Поди догадайся, что он хочет.
Проблемы вы описали, не указав, что на самом деле надо. Только отсылки к другим версиям, здесь не представленным.

У вас проблема именно с enter или проблема с моргающим input? Если так, то какое у него должно быть поведение? Кликнули на кнопку, открылся input, нажали enter .... и что ожидается (input пропал / не пропал)?

Comments

[Genri_Rus]

Постараюсь объяснить более понятнее )

Вот я кликнул по кнопке с иконкой поиск:



Далее нажмите enter и инпут скроется, вот как сделать чтобы при нажатии на enter инпут не скрывался ?

[Andry]

Вы сами написали как: "не тоглить кнопку, если показан input"

$("input:hidden").toggle();

Оно?

[Genri_Rus]

Андрей, тогда проблема может быть в другом

Если мне нужно постоянно ее тоглить, т.е. показывать/скрывать только по клику на саму кнопку ?

[Genri_Rus]

Андрей, нет

Тогда при повторном клике на иконку с поиском у меня инпут не скрывается

[Andry]

Прямо поставленный вопрос решен. Но у вас чехарда с условиями.
Нужны нормальные условия для смены вида формы и всё станет на место.
Два состояния формы (по видимости инпута): "спрятан" и "показан";

спрятан -> клик по кнопке или enter -> показан | эта часть работает
показан -> нажатие enter ... что-то должно происходить ?
показан -> ... как перейти в состояние "спрятан" ?

[Genri_Rus]

Андрей, enter ничего не должен делать

[Andry]

вот я ща нервничать начинаю. посчитайте знаки вопроса в тексте, пжлст.

[Andry]

https://codepen.io/gordw-andrj/pen/rNOjMJY оно ?

[Дмитрий Беляев]

enter ничего не должен делать

Genri_Rus, это мне за мышкой тянуться предлагаете? простите но ctrl+w ближе

[Genri_Rus]

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

Мне нужно с e.preventDefault()

[Genri_Rus]

Дмитрий Беляев, я в мобильной версии хочу убрать такую возможность, а не на десктопной )

[Дмитрий Беляев]

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

[Andry]

Обновил код. Можете попробовать. Если я правильно понял, как этой фигней пользуются :)

Enter на поле ввода в форме отправляет форму, при этом "нажимается" кнопка типа submit в этой форме.
Делаете кнопку типа button - теперь она не будет реагировать на enter инпута. И можно спокойно тоглить инпут.
Enter в инпуте по прежнему отправляет форму... тут обработать надо или запретить.

<form>
  <input type="text">
  <button type="button"><i class="fas fa-search"></i></button>
</form>

$("form").on('click','button', function(e) {
  $("input").toggle();
}).submit(function(e){
  e.preventDefault();  
});

[Genri_Rus]

Дмитрий Беляев, при фокусе ничего не скрывается, даже если я нажимаю enter

[Genri_Rus]

Андрей, спасибо за ответ, но опять есть проблема )

На десктопной версии менять ничего не нужно, нужно менять только на экранах ниже:

$("form").on('submit', function(e) {
  if ($(window).width() < 769) {
   тут запрет на submit	
 }
});

[Genri_Rus]

Андрей, и все таки type="button" на декстопе мне не подходит, т.к. переадресация на другую страницу не произойдёт

[Andry]

Genri_Rus, я пас :) У вас одно тянет за второе и не совсем понятно, что делать по итогу с текстом в инпуте после enter.

В обработчике отправки формы нужно найти способ узнать, кто инициировал отправку формы... если один фиг форма не отправляется, то зачем там submit? Костыли к костылям...

[Andry]

$("form").on('click','button', function(e) {
  $("input").toggle();
  $('button').attr('type', 'button');
}).submit(function(e){
  e.preventDefault();  
});

Меняйте тип кнопки при показе инпута! Спокойной ночи :)

https://codepen.io/gordw-andrj/pen/rNOjMJY

[Genri_Rus]

Андрей, в мобильной версии я планировал отправку сделать с помощью window.location.reload, get запрос

А в десктопной просто по дефолту, через submit, т.к. у меня input не будет скрыт на десктопной версии

[Genri_Rus]

Андрей, мне просто интересно, как это делают нормальные люди )

Многие скрывают инпуты на мобильной версии и у них вроде все нормально работает

[Andry]

как это делают нормальные люди

Да где же их нормальных взять :)

Я в таких случаях говорю себе: "Проблема не в этом месте, сделай шаг назад и осмотрись более широко."
Как вообще работает форма поиска в широкой и узкой версиях? Многократная отправка формы по Enter это ведь не проблема лишь узкой версии. Форма в обоих видах (узкий.широкий) должна работать практически одинаково.

Какая именно особенность поведения узкой формы? У нее по умолчанию скрыт инпут и он прячется, когда не нужен. Узкой форме надо озаботиться лишь этим.
Когда его показать? При нажатии на кнопку, когда он еще скрыт.
Когда его скрыть? Когда он больше не нужен. Тут я выбрал условие "поиск совершен либо фокус уходит с пустого импута". Именно с пустого, вдруг я отвлекся на уточнение вопроса, а мне и инпут спрятали. Не хватает крестика для очистки инпута одним кликом.

var isMobile = true;
$("form").on('blur','input', function(e) {
  if(isMobile && $(this).val() == ''){
   $(this).hide();
   $('<div>').appendTo('body').text('hide empty input')
  }
}).submit(function(e){
  e.preventDefault();   
  var $input = $('input'); 
  if(isMobile){
    if($input.is(':hidden')){ 
      $input.show().focus();
      return false;
    }else{
      $input.hide();     
    }
  }
  $input.blur(); //защита от множественной отправки
  // полезная работа
  $('<div>').appendTo('body').text('search: '+$input.val());
  $input.val(''); // можно попробовать не очищать для широкой формы
});

https://codepen.io/gordw-andrj/pen/rNOjMJY

прочий код

<form>
  <input type="text">
  <button type="submit"><i class="fas fa-search"></i></button>
</form>

input, button {
  border: 1px solid #000;
}

input {
  display: none;
  height: 46px;
  vertical-align: top;
  padding-left: 10px;
  font-size: 20px;
}

button {
  width: 50px;
  height: 50px;
  border: 1px solid #000;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
}

[Genri_Rus]

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

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

[Andry]

Genri_Rus, сейчас он в коде лишь для работы кодепена.

Убeрите preventDefault и форма будет обрабатываться стандартным образом. Или ajax отправку прицепить - это уже другая история.

[Genri_Rus]

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

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

[Genri_Rus]

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

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

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

[Andry]

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

Обработка пустого текста для поиска - это уже работа "полезной части", которая занимается непосредственно поиском. Этот код занимается лишь особенностями мобильной формы. Проверку отмены поиска можно добавить возле комментария "полезная работа".

// полезная работа
  if($input.val() == ''){return false};  <<<<<===
  $('<div>').appendTo('body').text('search: '+$input.val());

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

Мой вариант меняет видимость одного элемента, согласно вашей задачи. Как вы это сверстаете - коду все равно. Хоть таблицами, хоть флексами.

[Genri_Rus]

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

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

[Andry]

https://codepen.io/gordw-andrj/pen/bGVqbmo

[Genri_Rus]

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

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

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

[Andry]

Подвиньте кнопку, чтобы она не залазила на инпут.

[Genri_Rus]

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

[Andry]

И текст под кнопку залазить будет?

[Genri_Rus]

Андрей, нет

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

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

window.location.reload

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

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

[Andry]

а может вторую кнопку?

Крестик может быть внутри инпута. По клику на крестик надо очистить поле ввода и убрать фокус. И только.

А кнопка поиска пусть занимается поиском.

[Genri_Rus]

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

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

[Andry]

Да что вы говорите :) кажется, мы это уже проходили метром выше.
Там же выше я предлагал вам сделать шаг назад и осознать. Вы пытаетесь костылями заставить работать семантически неверный код. Вы берете придуманные w3c элементы и начинаете пользовать их "в неприроднiй спосiб". Код не имеет красоты и работать нормально не будет - только красивый код работает хорошо :)

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

Затем добавьте некоторое поведение мобильной версии. Не с ног на голову поиск менять, а лишь добавить заморочку с этим инпутом.

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

Я не готов костыльничать дальше. Хотите помощи - можем рассмотреть форму поиска целиком без условий "уже это есть надо только".

Поигрался с кодом. Головоломка тая еще выходит. https://codepen.io/gordw-andrj/pen/rNOjMJY
Хотя форма ведет себя, как по мне, вполне логично.

[Andry]

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

нажимаем второй раз (инпут пустой):
дефокус - инпут прячется
клик кнопки
сабмит формы - показываем спрятанный инпут

вводим текст и нажимаем кнопку:
дефокус - инпут с текстом (не прячется)
клик кнопки
сабмит формы - инпут показан, читаем текст, отправляем запрос

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

Считаю такое поведение вполне логичным ) Вы нажимаете на кнопку поиска - ищите! Не хотите искать - сними фокус, кликнув на чем-то другом, и поиск спрячется.
Чем-то другим может выступать кнопка крестик - она сотрет текст и погасит инпут.

Пока писал, вспомнил, что делал примерно такое. Была пустая кнопка, которую нужно было нажать юзеру только чтобы убрать фокус с поля ввода.

[Genri_Rus]

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

[Andry]

Насколько мне фантазия позволяет додумать вашу хотелку, то текущая кнопка - это слово искать, затертый текст - инпут, крестик - несуществующая еще кнопка, светлый прямоугольник, наверное, сама форма.

Миелофона у меня нет :)

[Genri_Rus]

Андрей,

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

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

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

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

[Andry]

А текущая кнопка где?

[Genri_Rus]

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

[Andry]

Это уже не похоже на решение вопроса. Показ картинки без комментариев ... на сим откланиваюсь. Своя работа стоит.

[Genri_Rus]

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

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

[Genri_Rus]

Андрей,

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

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

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

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

[Genri_Rus]

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

[Andry]

Попробуйте сформулировать полностью от а до я условия задачи. Я устал дергаться между картинками без объяснений. Учитесь делиться мыслями - это полезно )

На вопрос "а где кнопка" отвечать "ее нет" - это почти проявление неуважения ко мне, уделившему вам столько времени. Ответ мог быть "этой кнопки нет, потому что ... в этом виде ее роль выполняет ..."
Потому как если нет кнопки, вызывающей диалог поиска, то и говорить больше нет очем.

На второй картинке есть, по видимому, две кнопки, про которые ни слова не упоминается. Если вы решили, что что-то само собой разумеется, то нет - все стоит описывать, что все оперировали верными фактами, а не своими придумками.

[Genri_Rus]

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

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

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

[Andry]

Шось я совсем туплю, а как запустить поиск, если там только крестик, который служит для очистки поля ввода и вообще его скрытия ?

[Genri_Rus]

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

[Andry]

нажимаю на кнопку, ввожу текст и жму enter
button click
form submit
show input
button click
form submit
input blur
hide empty input
search: BUTTON TYPE SUBMIT

Добавляю в код "в мобильной версии при показе инпута кнопке делаю type=button"
button click
form submit
show input
form submit
input blur
hide empty input
search: BUTTON TYPE=BUTTON

зачем я это проверил, попробовал...

Я уже запутался. Примерно ясно, как хотите. Что на данный момент не получается ?

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

Чего не хватает? Только развернуто, пжлст.

[Genri_Rus]

Андрей,

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

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

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

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

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

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

[Andry]

Закрытие крестиком! либо потерей фокуса пустого инпута.

На вашей картинке с инпутом вообще нет кнопки сабмита - на ее месте инпут.

[Andry]

Крестик пусть и в нормальной версии будет. И делать он будет то же самое: очищать содержимое и слать blur инпуту (но в обычной версии blur игнорится и инпут никуда не спрячется)

[Genri_Rus]

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



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

[Andry]

У вас на рисунке вообще нет этой кнопки при показанном инпуте в мобильном виде (картинка два из трех)

[Genri_Rus]

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

[Genri_Rus]

Андрей, правильно ?

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

[Andry]

Уберите с кнопки тип сабмит вообще.
В обработчике клика кнопки, либо показывайте/скрывайте инпут в мобильной версии, либо отправляйте форму.

https://codepen.io/gordw-andrj/pen/BaoWxVX

[Andry]

Не увидел предыдущее сообщение. Вы аналогично сделали. Ну, поздравляю )

[Genri_Rus]

Андрей,

Уберите с кнопки тип сабмит вообще.

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


P.S. Я планирую менять в мобильной версии на тип button

[Andry]

Попробуйте в своей последней версии понажимать на кнопку в уголочке.

Тип сабмит убрать ... да потому что уже тяжело листать до последнего комментария, а форма все не работает. С первых постов разговор о сабмите идет :)

Заканчивайте уже эту форму.

[Genri_Rus]

Андрей,

Попробуйте в своей последней версии понажимать на кнопку в уголочке.

А почему такой баг ?

Answer 2

[Kataev]

$("input").keydown(function(event){
   if (event.keyCode === 13) {
      return false;
  }
}

Comments

[Genri_Rus]

Все равно при клике на enter инпут скрывается: https://codepen.io/Genri_Rus/pen/XWmpKaX

[Kataev]

Добавь focus() к инпуту в функции нажатия на button

$("input").toggle().focus()

[Genri_Rus]

KataevAS, проверьте сами

1. нажимаю на кнопку с иконкой поиска
2. нажимаю снова на кнопку с иконкой поиска
3. нажимаю enter - инпут снова открыт

[Genri_Rus]

KataevAS, правильно ?

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

[Kataev]

Так тебе нужно, что бы он не открывался по нажатию?? Ты в первом комментарии написал о том, что он СКРЫВАЕТСЯ, а теперь пишешь, что он открывается...

[Genri_Rus]

KataevAS, мне нужно, чтобы enter вообще не реагировал на открытие или закрытие инпута

[Kataev]

Тут в конце добавь blur()

$("form").on('submit', function(e) {
    e.preventDefault();
  
    $("input").toggle().focus();
		if ($(window).width() < 769) {
				
		}
}).blur();

[Genri_Rus]

KataevAS, все равно не хочет: https://codepen.io/Genri_Rus/pen/XWmpKaX

Проблема так и не решилась с enter:
1. нажимаю на кнопку с иконкой поиска
2. нажимаю снова на кнопку с иконкой поиска - инпут скрыт
3. нажимаю enter - инпут снова открыт

[Kataev]

Genri_Rus,
Точно, надо же фокус с кнопки убрать, вот

$("form").on('submit', function(e) {
    e.preventDefault();
  
    $("input").toggle().focus();
    if ($(window).width() < 769) {
  
    }
  $("button").blur();
});

$("input").keydown(function(event){
   if (event.keyCode === 13) {
      return false;
  }
});

[Genri_Rus]

KataevAS, вот теперь как надо работает, спасибо большое !

Answer 3

[Rsa97]

А зачем вы даёте кнопке тип submit, если сразу же блокируете её по preventDefault и не хотите, чтобы она реагировала на Enter?

Comments

[Genri_Rus]

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

Получается в мобильной версии эффект такой же

[Genri_Rus]

Я preventDefault планировал прописывать на экранах, которые меньше 768px

P.S. Это просто для наглядности такого эффекта я показал