Formularübermittlung beim Drücken der Eingabetaste verhindern

Question

を持っています。 form mit zwei Textfeldern, einem Wählen Sie Dropdown und eine Optionsschaltfläche . Wenn die enter Taste gedrückt wird, möchte ich meine JavaScript-Funktion aufrufen, aber wenn ich sie drücke, wird die form vorgelegt wird.

Wie kann ich die form von der Übermittlung, wenn die <strong>enter</strong> Taste gedrückt wird?

Answer 1

Ein wenig einfach

Senden Sie das Formular nicht auf Tastendruck "Enter":

<form id="form_cdb" onsubmit="return false">

Führen Sie die Funktion mit der Taste "Enter" aus:

<input type="text" autocomplete="off" onkeypress="if(event.key === 'Enter') my_event()">

Answer 2

Eine jQuery-Lösung.

Ich kam hier auf der Suche nach einem Weg, um die Formularübermittlung zu verzögern, bis nach der Blur-Ereignis auf der Texteingabe ausgelöst worden war.

$(selector).keyup(function(e){
  /*
   * Delay the enter key form submit till after the hidden
   * input is updated.
   */

  // No need to do anything if it's not the enter key
  // Also only e.which is needed as this is the jQuery event object.
  if (e.which !== 13) {
       return;
  }

  // Prevent form submit
  e.preventDefault();

  // Trigger the blur event.
  this.blur();

  // Submit the form.
  $(e.target).closest('form').submit();
});

Es wäre schön, eine allgemeinere Version zu erhalten, die alle verzögerten Ereignisse auslöst und nicht nur das Absenden des Formulars.

Answer 3

Ein viel einfacherer und effektiverer Weg sollte aus meiner Sicht sein:

function onPress_ENTER()
{
        var keyPressed = event.keyCode || event.which;

        //if ENTER is pressed
        if(keyPressed==13)
        {
            alert('enter pressed');
            keyPressed=null;
        }
        else
        {
            return false;
        }
}

Answer 4

Verwendung von TypeScript und Vermeidung mehrfacher Aufrufe der Funktion

let el1= <HTMLInputElement>document.getElementById('searchUser');
el1.onkeypress = SearchListEnter;

function SearchListEnter(event: KeyboardEvent) {
    if (event.which !== 13) {
        return;
    }
    // more stuff
}

Answer 5

<div class="nav-search" id="nav-search">
        <form class="form-search">
            <span class="input-icon">
                <input type="text" placeholder="Search ..." class="nav-search-input" id="search_value" autocomplete="off" />
                <i class="ace-icon fa fa-search nav-search-icon"></i>
            </span>
            <input type="button" id="search" value="Search" class="btn btn-xs" style="border-radius: 5px;">
        </form>

</div>

<script type="text/javascript">
    $("#search_value").on('keydown', function(e) {
        if (e.which == 13) {
             $("#search").trigger('click');
            return false;
        }
    });
    $("#search").on('click',function(){
        alert('You press enter');
    });
</script>