Запретить отправку, когда я нажимаю «ввести» на конкретном элементе формы

Question

Это может быть немного сложно.

У меня есть форма с 10 текстовыми полями (рассмотрим ее имя1, имя2 .. имя10)

, что я хочу, это когда я сосредотачиваюсь на name1 текстовое поле и я нажимаю «ввод», форма не должна быть отправлена. вместо этого я хочу вызвать функцию.

, но когда я нажимаю "ввод", фокусируя другие элементы формы, а не name1, форма должна быть отправлена.

Пожалуйста, предложите мне, если вы думаетеесть другая идея сделать это.

ПРИМЕЧАНИЕ. Я не могу переместить элемент за пределы формы.

Answer 1

использовать событие нажатия клавиши для первого элемента ввода и запретить отправку формы с помощью event.preventDefault();

$(document).ready(function() {
  $("#name1").keydown(function(event){
    if(event.keyCode == 13) {
      calculate() // call your function here
      event.preventDefault();
    }
  });
  
  $( 'form' ).on( 'submit' , () => { // arrow function
    console.log("submited"); // form
} );
  function calculate() {
    console.log("prevent submitting");
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.js"></script>

<form>
  <input id="name1" type="text" />  
  <input type="text" />
  <input type="text" />
  <input type="text" />
  <input type="text" />
  <input type="text" />
  <input type="text" />
  <input type="text" />
  <input type="submit" value="Go">
</form>

Answer 2

$('form').on('keypress', function(e) {
    if (e.code === 'Enter' && $(e.target).is('textarea')) {
        return false;
    }
});