JavaScriptでキーを押すイベントを入力してください


330

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

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

回答:


445
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)" />

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

function runScript(e) {
    //See notes about 'which' and 'key'
    if (e.keyCode == 13) {
        var tb = document.getElementById("scriptBox");
        eval(tb.value);
        return false;
    }
}

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

注意:

現在非推奨keyCodeなっていることが指摘されています。次の最善の選択肢がwhichいるにも廃止されて

残念ながら、key最近のブラウザで広くサポートされているこの推奨規格は、IEとEdgeでいくつかの危険な動作をしています。IE11より古いものは、ポリフィルが必要です

さらに、廃止予定の警告はkeyCodeand についてかなり不吉ですが、whichそれらを削除すると、無数のレガシーWebサイトに重大な重大な変更が加えられます。そのため、すぐにどこへでも行くことはまずありません。


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

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

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

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


138

との両方event.whichを使用event.keyCode

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

11
event.whichとevent.keyCodeの両方がなぜですか?
Alex Spurling

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

orのkeydown代わりにイベントも使用してくださいkeyupkeypress
manish_s 2014年

@Agiagnocですが、これをどのイベントにアタッチする必要がありますか?
ドンチードル

2
@ manish、keypressはkeydown / upよりも多くの情報を提供します。stackoverflow.com/a/9905293/322537
Fzs2

78

jQueryを使用している場合:

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

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

19
あなたは、keyUpイベントの代わりにはKeyDownイベントを使用する必要があります$('input[type=text]').on('keydown', function(e) { if (e.which == 13) { e.preventDefault(); } });
ペタルDonchevマリノフ

2
キーアップは送信後に発生するため、キャンセルすることはできません。
Pierre-Olivier Vares 2014

キーアップとキープレスの両方がうまくいきました。私はキーを押しました。ありがとう!
markiyanm 2014年

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

71

event.key === "Enter"

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

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

Mozillaドキュメント

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


これを探していました。$ eventのコンソールログでキープロパティを確認しました。より信頼できると思った
tatsu

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

1
keyCode廃止予定です。これは、コード内の魔法の整数よりも読みやすく、保守しやすい
Gibolt


17

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

<form onsubmit="javascript:myfunc();return false;" >

このページで別のフォームを送信しているため、onsubmitを上書きできません
Shyju

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

フォームが送信されたときに実行する別の削除手順があります。そのまま維持します
Shyju 2009年

17

反応jsソリューション

 handleChange: function(e) {
    if (e.key == 'Enter') {
      console.log('test');
    }


 <div>
    <Input type="text"
       ref = "input"
       placeholder="hiya"
       onKeyPress={this.handleChange}
    />
 </div>

9

ですから、できるだけ多くのブラウザをカバーし、将来を見据えた最善の解決策は、

if (event.which === 13 || event.keyCode === 13 || event.key === "Enter")

6

純粋なJavaスクリプトを使用して実行したい場合は、ここで完全に機能する例を示します

これがあなたのhtmlファイルであるとしましょう

<!DOCTYPE html>
<html>
  <body style="width: 500px">
    <input type="text" id="textSearch"/> 
      <script type="text/javascript" src="public/js/popup.js"></script>
  </body>
</html>

あなたのpopup.jsファイルでこの関数を使うだけです

var input = document.getElementById("textSearch");
input.addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        alert("yes it works,I'm happy ");
    }
});

5

以下のコードはENTER、ページ全体にキーのリスナーを追加します。

これは、ログイン、登録、送信など、アクションボタンが1つの画面で非常に役立ちます。

<head>
        <!--Import jQuery IMPORTANT -->
        <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

         <!--Listen to Enter key event-->
        <script type="text/javascript">

            $(document).keypress(function (e) {
                if (e.which == 13 || event.keyCode == 13) {
                    alert('enter key is pressed');
                }
            });
        </script>
    </head>

すべてのブラウザでテスト済み。


3

jQueryソリューション。

テキスト入力のblurイベントが発生するまでフォームの送信を遅らせる方法を探してここに来ました。

$(selector).keyup(function(e){
  /*
   * Delay the enter key form submit till after the hidden
   * input is updated.
   */

  // No need to do anything if it's not the enter key
  // Also only e.which is needed as this is the jQuery event object.
  if (e.which !== 13) {
       return;
  }

  // Prevent form submit
  e.preventDefault();

  // Trigger the blur event.
  this.blur();

  // Submit the form.
  $(e.target).closest('form').submit();
});

フォームの送信だけでなく、すべての遅延イベントを発生させるより一般的なバージョンを取得するとよいでしょう。


3

私の観点から見ると、はるかに単純で効果的な方法は次のとおりです。

function onPress_ENTER()
{
        var keyPressed = event.keyCode || event.which;

        //if ENTER is pressed
        if(keyPressed==13)
        {
            alert('enter pressed');
            keyPressed=null;
        }
        else
        {
            return false;
        }
}

2

TypeScriptを使用し、関数の多重呼び出しを回避する

let el1= <HTMLInputElement>document.getElementById('searchUser');
el1.onkeypress = SearchListEnter;

function SearchListEnter(event: KeyboardEvent) {
    if (event.which !== 13) {
        return;
    }
    // more stuff
}

この質問は8年以上前のものです。Typescriptは存在しませんでした。それで、あなたは他の質問に答えていないのですか?
ニコ・ハーセ2018年

2

少しシンプル

「Enter」キーを押したときにフォームを送信しないでください。

<form id="form_cdb" onsubmit="return false">

「Enter」キーを押して関数を実行します。

<input type="text" autocomplete="off" onkeypress="if(event.key === 'Enter') my_event()">

1

ネイティブjs(フェッチAPI)

document.onload = (() => {
    alert('ok');
    let keyListener = document.querySelector('#searchUser');
    // 
    keyListener.addEventListener('keypress', (e) => {
        if(e.keyCode === 13){
            let username = e.target.value;
            console.log(`username = ${username}`);
            fetch(`https://api.github.com/users/${username}`,{
                data: {
                    client_id: 'xxx',
                    client_secret: 'xxx'
                }
            })
            .then((user)=>{
                console.log(`user = ${user}`);
            });
            fetch(`https://api.github.com/users/${username}/repos`,{
                data: {
                    client_id: 'xxx',
                    client_secret: 'xxx'
                }
            })
            .then((repos)=>{
                console.log(`repos = ${repos}`);
                for (let i = 0; i < repos.length; i++) {
                     console.log(`repos ${i}  = ${repos[i]}`);
                }
            });
        }else{
            console.log(`e.keyCode = ${e.keyCode}`);
        }
    });
})();
<input _ngcontent-inf-0="" class="form-control" id="searchUser" placeholder="Github username..." type="text">


client_idなどがここに含まれているのはなぜですか?コードは合法ですか?
エディパーキンソン2018

1
<form id="form1" runat="server" onkeypress="return event.keyCode != 13;">

このコードをHTMLページに追加すると、... Enterボタンが無効になります。


0
<div class="nav-search" id="nav-search">
        <form class="form-search">
            <span class="input-icon">
                <input type="text" placeholder="Search ..." class="nav-search-input" id="search_value" autocomplete="off" />
                <i class="ace-icon fa fa-search nav-search-icon"></i>
            </span>
            <input type="button" id="search" value="Search" class="btn btn-xs" style="border-radius: 5px;">
        </form>

</div>

<script type="text/javascript">
    $("#search_value").on('keydown', function(e) {
        if (e.which == 13) {
             $("#search").trigger('click');
            return false;
        }
    });
    $("#search").on('click',function(){
        alert('You press enter');
    });
</script>

0

クロスブラウザーソリューション

一部の古いブラウザは、キーダウンイベントを非標準的な方法で実装していました。

KeyBoardEvent.keyは、最新のブラウザーに実装されることが想定されている方法です。

which またkeyCode、現在は非推奨となっていますが、それでもこれらのイベントを確認しても問題はないので、コードはIEなどの古いブラウザーを使用しているユーザーでも機能します。

isKeyPressed押されたキーが入力した場合の機能をチェックしevent.preventDefault()提出からフォームを妨げます。

  if (isKeyPressed(event, 'Enter', 13)) {
    event.preventDefault();
    console.log('enter was pressed and is prevented');
  }

最小限の作業例

JS

function isKeyPressed(event, expectedKey, expectedCode) {
  const code = event.which || event.keyCode;

  if (expectedKey === event.key || code === expectedCode) {
    return true;
  }
  return false;
}

document.getElementById('myInput').addEventListener('keydown', function(event) {
  if (isKeyPressed(event, 'Enter', 13)) {
    event.preventDefault();
    console.log('enter was pressed and is prevented');
  }
});

HTML

<form>
  <input id="myInput">
</form>

https://jsfiddle.net/tobiobeck/z13dh5r2/

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.