inputのtypeのtextでENTER押したら飛ぶようにしたい

  • そのほうがカンタンでしょ?
  • 間違いは増えるかも?
  • 気をつけましょう!
  • 自分で書いたコードはコレです。
<input type="text" id="text"><input type="button" onclick="x();">

タブ押して移動したり、マウスでボタン押すのが面倒です。

Google検索「input submit ENTER type=”text”」↓

<form onsubmit="x();">
        <input type="text"/>
</form>

やっぱりformタグ使うのですね。

でもコレだと一度ページが更新されてしまいます。

昔に「return false;」って見たことがあります。調べます。

Google検索「submit return false」↓

onsubmitの戻り値をfalseにしてsubmitを実行しない(中断させる)方法
onsubmitイベントと「return false」を組み合わせて、フォームデータのsubmitを中断する方法を紹介します。

常に送信を中止したい場合は、「onsubmit=”関数名; return false;”」と書けばよいでしょう。

…ということはこういうことですね?↓

<form onsubmit="x(); return false;">
  <input type="text"/>
</form>

おっ!いい感じです。うまくいきました。意図した動作…?いえ、見えないところはわからないので、「意図した見た目」になりました。

以上です。

※エンター押すだけですぐ送信される、関数が走ってしまうというのは楽ですけど、その速さも注意が必要ですね。要は何を優先、重視し、用途と目的は何かです。

タイトルとURLをコピーしました