Zenn
Open1

漢字変換のEnterでは送信しないで、入力後のEnterで送信する

HTML
yoshiwebyoshiweb
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>漢字変換のEnterでは送信しないで、入力後のEnterで送信する</title>
</head>
<body>

<form id="myForm" onsubmit="return false;">
  <input id="myInput" type="text">
  <input type="submit" value="送信">
</form>
<script>
  // input要素を取得
  const input = document.getElementById("myInput");
  // keydownイベントを監視
  input.addEventListener("keydown", function(event) {
    // Enterキーが押された場合
    if (event.keyCode === 13) {
      // 変換中かどうか判定
      if (event.isComposing) {
        // 変換中なら何もしない
        console.log('変換中なら何もしない')
        return;
      } else {
        // 変換中でなければフォームを送信する
        console.log('送信する')
        document.getElementById("myForm").submit();
      }
    }
  });
</script>

</body>
</html>