[解決済み] Enterキーが押されたときにフォームを送信しないようにする
質問
私は
form
には2つのテキストボックスがあり、1つは
選択
ドロップダウンと
ラジオボタン
. このとき
入力
キーが押されたときに、JavaScript の関数を呼び出したいのですが、キーを押したときに
form
が送信されます。
を防ぐにはどうしたらいいのでしょうか?
form
が送信されたときに
入る
キーが押されましたか?
解決方法は?
if(characterCode == 13)
{
return false; // returning false will prevent the event from bubbling up.
}
else
{
return true;
}
では、あるフォームに次のようなテキストボックスがあるとします。
<input id="scriptBox" type="text" onkeypress="return runScript(event)" />
エンターキーが押されたときに、このテキストボックスからユーザー定義のスクリプトを実行し、フォームを送信させないようにするには、以下のようにします。 サンプル のコードで説明します。この関数はエラーチェックをしないので、おそらくIEでしか動作しないことに注意してください。これを正しく実行するには、より堅牢なソリューションが必要ですが、一般的なアイデアは得られるでしょう。
function runScript(e) {
//See notes about 'which' and 'key'
if (e.keyCode == 13) {
var tb = document.getElementById("scriptBox");
eval(tb.value);
return false;
}
}
この関数の値を返すと、イベントハンドラはイベントをこれ以上バブル化しないように警告し、キー押下イベントがこれ以上処理されないようにします。
注意
指摘されているのは
keyCode
は
現在では非推奨
. 次善の策として
which
があります。
も非推奨となりました。
.
残念ながら、有利な標準
key
は、最近のブラウザで広くサポートされていますが、一部の
IEとEdgeでおかしな挙動をする
. IE11 よりも古いものは、やはり
ポリフィル
.
さらに、非推奨の警告はかなり不吉なものですが
keyCode
と
which
そのため、これらを削除すると、膨大な数のレガシーサイトに大きな変更を加えることになります。そのため
すぐにどこかに行ってしまうことはないでしょう。
関連
-
vueネットワークリクエストソリューション ネイティブネットワークリクエストとjsネットワークリクエストライブラリ
-
[解決済み】Node Version Manager のインストール - nvm コマンドが見つかりません。
-
[解決済み] ラジオボタンのチェックをはずすには?
-
[解決済み] JavaScriptのオブジェクトにキーが存在するかどうかをチェックする?
-
[解決済み] event.preventDefault() vs. return false
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] テキストボックスのEnterキーで、JavaScriptでボタンクリックをトリガーする
-
[解決済み] どうすればjQueryに非同期ではなく、同期のAjaxリクエストを実行させることができますか?
-
[解決済み] jQueryイベントKeypress。どのキーが押されたか?
-
[解決済み] jQueryで'Enter'でフォームをサブミット?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
vue3レスポンシブ対応のためのsetup+ref+reactive
-
Vueの要素ツリーコントロールに破線を追加する説明
-
jQueryのコピーオブジェクトの説明
-
vueの補間表現とv-textディレクティブの違いについて
-
[解決済み】React - TypeError: 未定義のプロパティ 'props' を読み取ることができない。
-
[解決済み】リクエストに失敗していないのに、「TypeError: failed to fetch」が表示される。
-
[解決済み】エラー。Ionic使用中にモジュール '../lib/utils/unsupported.js' が見つかりませんでした。
-
nodejs unhandledPromiseRejectionWarning メッセージ
-
[解決済み] テキスト入力フィールドでEnterキーを検出する
-
JavaScriptのgetElementById()メソッド入門