Ctrl + TEXTAREAにjQueryを入力


92

カーソルがTEXTAREA内にあり、Ctrl+Enterが押されたときに何かをトリガーするにはどうすればよいですか?jQueryを使用します。ありがとう


あなたが受け入れた答えは機能しません。受け入れた回答を変更してください
peterchaula 2017年

回答:


128

event.ctrlKeyフラグを使用してCtrl、次のようにキーが押されているかどうかを確認できます。

$('#textareaId').keydown(function (e) {

  if (e.ctrlKey && e.keyCode == 13) {
    // Ctrl-Enter pressed
  }
});

上記のスニペットをここで確認してください。


15
これはGoogleChromeでは機能しません。Ctrl + Enterを押すと、キーコードは10ではなく、になり13ます。
znarkus 2011年

39
これは動作しません。以下のYarolslavYakovlevのソリューションは正しく機能します。時間を節約するために、受け入れられた回答を変更してください。
Phil Ricketts 2012年

1
@Repleteどの環境をテストしましたか?keyCode 10に関するドキュメントはありますか?
サンヒョンリー2014

keyCode10はChromeではもう発生しないはずです。bugs.chromium.org
p /

トリガーkeypressイベントの場合、キーコードは10になりますが、keydownまたはkeyup13を報告します。テストクロムのみ
iulo 2017

137

実際、これはトリックを実行し、すべてのブラウザで機能します。

if ((event.keyCode == 10 || event.keyCode == 13) && event.ctrlKey)

jsフィドルへのリンク。

ノート:

  • WindowsおよびLinux上のChromeでは、13ではなく10enterとして登録されますkeyCodeバグレポート)。したがって、どちらかを確認する必要があります。
  • ctrlKeycontrolWindows、Linux、およびMacOSで(ありませんcommand)。も参照してくださいmetaKey

このフィドルはFirefox27では機能しません。何が問題なのですか。
CodeManX 2014年

4
@Yaroslav:あなたの答えで「event.keyCode == 10」がどのように使われているのか教えてください。
Shashank.gupta40 2014

3
keyCode 10やその他のChromeについてまだ疑問に思っている人は、これを読んでください。
user2422869 2015年

1
@YaroslavYakovlevはctrlKeyMacのコマンドキーに対応していますか?
ジェイコブスタム2015年

2
Macもサポートするには:if ((e.keyCode == 10 || e.keyCode == 13) && (e.ctrlKey || e.metaKey))
Ilya Manyahin 2017

81

ユニバーサルソリューション

これはmacOSもサポートします。Ctrl+Enter⌘ Command+の両方Enterが受け入れられます。

if ((e.ctrlKey || e.metaKey) && (e.keyCode == 13 || e.keyCode == 10)) {
    // do something
}

15
スコアが低いので、この回答を無視しないでください。これは新しい回答であり、実際には優れています。
デビッドベル

1
最初の部分の説明:macOSでは、をe.ctrlKey検出⌃ Controlしてe.metaKey検出し⌘ Commandます。Ctrl-EnterとCommand-Enterの両方で動作をトリガーする場合は、これを使用します。
RoryO'Kane19年

に加えてEnterを意味するe.keyCode10を受け入れる理由を説明できます13か?MDNのkeyCodeドキュメントのみリスト13入力の可能な値として、複数のブラウザとオペレーティングシステム間でテストしました。
RoryO'Kane19年

1
@ RoryO'Kane WindowsおよびLinux上のChromeの一部のバージョンでは、値10が使用されているようです。
Flimm

4

他の人の回答が不完全であるか、クロスブラウザ互換ではないことがわかりました。

このコードはグーグルクロームで動作します。

$(function ()
{
    $(document).on("keydown", "#textareaId", function(e)
    {
        if ((e.keyCode == 10 || e.keyCode == 13) && e.ctrlKey)
        {
            alert('ctrl+enter');
        }
    });
});

2
さらに説明を追加して、回答を改善することを検討できますか?ありがとう:)そうでなければ、これは質の低い質問に対する質の低い答えになります。
Theolodis 2014年

@Valamas:あなたの答えで「event.keyCode == 10」が何に使われているのか教えてください。
Shashank.gupta40 2014

1
私はコピー&ペースター答えを愛する
博士マックスVölkel

2

これは、次のように、シンプルだが柔軟なJQueryプラグインに拡張できます。

$.fn.enterKey = function (fnc, mod) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if ((keycode == '13' || keycode == '10') && (!mod || ev[mod + 'Key'])) {
                fnc.call(this, ev);
            }
        })
    })
}

したがって、

$('textarea').enterKey(function() {$(this).closest('form').submit(); }, 'ctrl')

ユーザーがctrl-Enterを押したときに、フォームのテキスト領域にフォーカスしてフォームを送信する必要があります。

https://stackoverflow.com/a/9964945/1017546のおかげで)


0
$('my_text_area').focus(function{ set_focus_flag });

//ctrl on key down set flag

//enter on key down = check focus flag, check ctrl flag

0

まず、Ctrlが押されたときにフラグを設定する必要があります。これはキーダウンで行います。次に、Enterキーを押す必要があります。のキーアップが表示されたら、フラグの設定を解除しますCtrl


0

ゲームに少し遅れるかもしれませんが、これが私が使用するものです。また、カーソルの現在のターゲットであるフォームの送信を強制します。

$(document.body).keypress(function (e) {
    var $el = $(e.target);
    if (e.ctrlKey && e.keyCode == 10) {
        $el.parents('form').submit();
    } else if (e.ctrlKey && e.keyCode == 13) {
        $el.parents('form').submit();
    }
});

ifelse if」を1つに簡略化できif (e.ctrlKey && (e.keyCode == 10 || e.keyCode == 13))ます。
RoryO'Kane19年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.