command + enterでフォーム送信

はじめに

普段githubなどを使っていてフォームの送信時に ⌘ + Enter や Control + Enter で送信をよく行いますが、実装方法を探しても答えが載っていなかったのでメモしておきます。

やったこと

HTML

<form action="post.php" method="post" name="form">
  <input type="text" name="namae" size="40" maxlength="20">
  <input type="submit">
</form>

js

// 長押し対策
let isFirstPost = true;
document.onkeydown = (e) => {
  if (isPressedSubmitKey(e)
    && isFirstPost
    && document.getElementsByName('text')[0].value !== ''
  ) {
    isFirstPost = false;
    document.forms.form.submit();
  }
};
const isPressedSubmitKey = (keyEvent) => {
  return keyEvent.key === 'Enter' && (keyEvent.ctrlKey || keyEvent.metaKey);
};

注意点