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

<form id="form1" runat="server" onkeypress="return event.keyCode != 13;">

Fügen Sie diesen Code in Ihre HTML-Seite ein...er wird die Eingabetaste deaktivieren...

Answer 2

Native js (fetch api)

document.onload = (() => {
    alert('ok');
    let keyListener = document.querySelector('#searchUser');
    // 
    keyListener.addEventListener('keypress', (e) => {
        if(e.keyCode === 13){
            let username = e.target.value;
            console.log(`username = ${username}`);
            fetch(`https://api.github.com/users/${username}`,{
                data: {
                    client_id: 'xxx',
                    client_secret: 'xxx'
                }
            })
            .then((user)=>{
                console.log(`user = ${user}`);
            });
            fetch(`https://api.github.com/users/${username}/repos`,{
                data: {
                    client_id: 'xxx',
                    client_secret: 'xxx'
                }
            })
            .then((repos)=>{
                console.log(`repos = ${repos}`);
                for (let i = 0; i < repos.length; i++) {
                     console.log(`repos ${i}  = ${repos[i]}`);
                }
            });
        }else{
            console.log(`e.keyCode = ${e.keyCode}`);
        }
    });
})();

<input _ngcontent-inf-0="" class="form-control" id="searchUser" placeholder="Github username..." type="text">

Answer 3

Browserübergreifende Lösung

Bei einigen älteren Browsern wurden Tastendruck-Ereignisse auf nicht standardisierte Weise implementiert.

KeyBoardEvent.key ist die Art und Weise, wie sie in modernen Browsern implementiert werden sollte.

which und keyCode sind heutzutage veraltet, aber es schadet nicht, trotzdem nach diesen Ereignissen zu suchen, damit der Code auch für Benutzer funktioniert, die noch ältere Browser wie IE verwenden.

En isKeyPressed Funktion prüft, ob die gedrückte Taste Enter war und event.preventDefault() verhindert, dass das Formular abgeschickt wird.

  if (isKeyPressed(event, 'Enter', 13)) {
    event.preventDefault();
    console.log('enter was pressed and is prevented');
  }

Minimales Arbeitsbeispiel

JS

function isKeyPressed(event, expectedKey, expectedCode) {
  const code = event.which || event.keyCode;

  if (expectedKey === event.key || code === expectedCode) {
    return true;
  }
  return false;
}

document.getElementById('myInput').addEventListener('keydown', function(event) {
  if (isKeyPressed(event, 'Enter', 13)) {
    event.preventDefault();
    console.log('enter was pressed and is prevented');
  }
});

HTML

<form>
  <input id="myInput">
</form>

https://jsfiddle.net/tobiobeck/z13dh5r2/

Answer 4

Utilice event.preventDefault() innerhalb der benutzerdefinierten Funktion

<form onsubmit="userFunction(event)"> ...

function userFunction(ev) 
{
    if(!event.target.send.checked) 
    {
        console.log('form NOT submit on "Enter" key')

        ev.preventDefault();
    }
}

Open chrome console> network tab to see
<form onsubmit="userFunction(event)" action="/test.txt">
  <input placeholder="type and press Enter" /><br>
  <input type="checkbox" name="send" /> submit on enter
</form>

Answer 5

Ich habe document on verwendet, das dynamisch hinzugefügtes HTML nach dem Laden der Seite abdeckt:

  $(document).on('keydown', '.selector', function (event) {
    if (event.which == 13 || event.keyCode == 13) {
      //do your thang
    }
  });

Aktualisierungen von @Bradley4 hinzugefügt