JavaScriptでキープレスイベントを入力する

Enter key press event in JavaScript


質問 written by Brian Tompsett - 汤莱恩 @2019-08-26 10:08:00Z

: 301 : 18 : 1

1つの選択ドロップダウンと1つのラジオボタンの 2つのテキストボックスがあるformがあります Enterキーが押されたときにJavascript関数(ユーザー定義)を呼び出したいのですが、それを押すとフォームが送信されます。

Enterキーが押されたときにformが送信されないようにするにはどうすればよいですか?

回答 1 written by ジョシュ @2018-05-18 18:05:44Z
415
if(characterCode == 13)
{
    return false; // returning false will prevent the event from bubbling up.
}
else
{
    return true;
}

では、フォームに次のテキストボックスがあると想像してください。

Ok, so imagine you have the following textbox in a form:

Enterキーが押されたときにこのテキストボックスから「ユーザー定義」スクリプトを実行し、フォームを送信しないようにするためのサンプルコードを次に示します。 この関数はエラーチェックを行わず、ほとんどの場合IEでのみ機能することに注意してください。 これを正しく行うには、より堅牢なソリューションが必要ですが、一般的なアイデアが得られます。

<input id="scriptBox" type="text" onkeypress="return runScript(event)" />

関数の値を返すと、それ以上イベントをバブルしないようにイベントハンドラーに警告し、keypressイベントがそれ以上処理されないようにします。

注意:

keyCode非推奨になったことが指摘されています。 非推奨 which次善策。

残念ながら、現代のブラウザで広くサポートされている人気のある標準keyIEとEdgeでいくつかの危険な動作をしています。 IE11より古いものは、まだpolyfillが必要です

さらに、非推奨の警告はkeyCodeおよびwhichについて非常に不吉ですwhich 、それらを削除すると、膨大な数のレガシーWebサイトに重大な重大な変更がkeyCodeなります。 そのため、 彼らはいつでもどこでもすぐに行くことはほとんどありません。

コメント 1

ユーザー定義とはどういう意味ですか?同様に、ユーザーはテキストボックスにスクリプトを入力し、Eval()を使用して実行します???

written by ジョシュ @2009-05-25 03:43:38Z

コメント 2

これはPreventDefualtを使用できる状況ですか?

written by ユーザー656925 @2011-09-01 18:05:34Z

コメント 3

@ Stuart.Sklinar-ユーザーがブラウザーに入力した入力でevalを実行すると、Chrome / FF / IEでコマンドコンソールを開いてスクリプト自体を入力した場合と同じように制御できなくなります。彼らが傷つけることができるのは自分自身だけです...もちろん、サーバーにセキュリティを適用していない限りは。それはまったく別の問題です。

written by ジョシュ @2012-07-11 12:52:55Z

コメント 4

@SteelBrain-繰り返しますが、誰かに入力できるテキストボックスを与え、ボタンを押してコンテンツをevalすることは、開発者ツールを開いて実行した場合と同じです。これがDBに保存され、 別のユーザーが開くことができる場合、それは大したことになるでしょうが、それはこの小さな断片とは完全に独立した問題です。

written by ジョシュ @2015-01-15 13:03:42Z

コメント 5

keyCodeは廃止されました

written by -John Slegers @2017-08-24 10:44:55Z

回答 2 written by ブラッドリー4 @2015-04-09 05:50:35Z
131

event.whichevent.keyCode両方を使用します。

function (event) {
    if (event.which == 13 || event.keyCode == 13) {
        //code to execute here
        return false;
    }
    return true;
};
コメント 1

なぜevent.whichとevent.keyCodeの両方ですか?

written by アレックススパーリング @2013-04-09 08:15:38Z

コメント 2

一部のブラウザーはwhich他のブラウザーがkeyCodeサポートすることwhichサポートしていkeyCode両方を含めることをお勧めします。

written by user568109 @2013-05-31 10:43:59Z

コメント 3

また、 keyupまたはkeypress代わりにkeydownイベントを使用しますkeydown

written by @2014-01-23 15:26:03Z

コメント 4

@Agiagnocしかし、これはどのイベントに添付する必要がありますか?

written by @2015-08-04 18:04:29Z

コメント 5

@ manish、keypressは、キーダウン/アップよりも多くの情報を提供します。stackoverflow.com/a/9905293/322537

written by Hermann Ingjaldsson @2015-09-15 11:50:07Z

回答 3 written by マット・K @2016-01-06 18:14:38Z
74

jQueryを使用している場合:

$('input[type=text]').on('keydown', function(e) {
    if (e.which == 13) {
        e.preventDefault();
    }
});
コメント 1

これを機能させることができませんでした。ハンドラーは起動しますが、少なくともChromeでは、 preventDefaultはフォームの送信を停止しないようです。

written by ドリューノアケス @2012-07-26 19:44:07Z

コメント 2

keyupの代わりにkeydownイベントを使用する必要があります: $('input[type=text]').on('keydown', function(e) { if (e.which == 13) { e.preventDefault(); } });

written by ペタルドンチェフマリノフ @2012-10-04 10:47:49Z

コメント 3

キーアップは送信後に起動されるため、キャンセルすることはできません。

written by ピエールオリヴィエヴァレス14 @2014-09-08 14:37:10Z

コメント 4

キーアップとキープレスの両方が私のために働いた。私はキーを押しました。ありがとう!

written by markiyanm @2014-10-16 14:45:55Z

コメント 5

他のコメンターが述べているように、 'keydown'は正しいです。変更されていないため、回答を更新します。私はこの答えを使用し、戻ってコメントを見るまでしばらくの間行き詰まりました。

written by マットK @2016-01-06 18:14:11Z

回答 4 written by @2018-01-19 19:02:04Z
57

event.key ===「Enter」

よりevent.key 、よりクリーンに: event.key使用します。 これ以上の任意の番号コードはありません!

const node = document.getElementsByClassName(".mySelect")[0];
node.addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
        event.preventDefault();
        // Do more work
    }
});

Mozilla Docs

サポートされているブラウザ

コメント 1

これを探していました。$ eventのコンソールログでキープロパティを見ました。より信頼性が高いと考えられていた

written by tatsu @2018-07-12 13:19:36Z

コメント 2

これは単なるマクロまたはエイリアスではありませんか?このコードを使用することでパフォーマンスの面で何か利点はありますか?

written by clockw0rk @2018-09-28 14:18:20Z

コメント 3

keyCodeは非推奨です。これは、コード内のマジック整数よりも読みやすく保守しやすいです

written by Gibolt @2018-09-28 16:41:54Z

回答 5 written by うーむ @2015-06-16 05:58:33Z
21

文書全体でEnterキーが押されたことを検出:

$(document).keypress(function (e) {
    if (e.which == 13) {
        alert('enter key is pressed');
    }
});

http://jsfiddle.net/umerqureshi/dcjsa08n/3/

回答 6 written by シュジュ @2012-06-25 04:14:28Z
17

フォームのonsubmitアクションをオーバーライドして関数の呼び出しとし、その後にfalseを追加します。

<form onsubmit="javascript:myfunc();return false;" >
コメント 1

このページで別のフォームを送信しているため、onsubmitをオーバーライドできません-Shyju

written by @2009-05-25 03:44:24Z

コメント 2

はい、できます。Javascriptはプロトタイプベースの言語です。document.forms ["form_name"]。onsubmit = fucntion(){}

written by the_drow 2009年 @2009-05-25 04:10:40Z