テキストボックスのEnterキーでJavaScriptを使用してボタンクリックをトリガーする


1293

テキスト入力とボタンが1つずつあります(下記参照)。JavaScriptを使用してEnterて、テキストボックス内でキーが押されたときにボタンのクリックイベントトリガーですか?

現在のページには既に別の送信ボタンがあるため、単純にボタンを送信ボタンにすることはできません。そして、この特定のボタンがこの1つのテキストボックス内から押された場合にのみEnterキーがこの特定のボタンをクリックするようにしたいだけです。

<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

1
私のような新人への重要な注意:この質問の重要な部分は、ページにすでにフォームがあり、送信ボタンがすでにあるかどうかです。jQueryの回答はクロスブラウザー互換であり、優れたソリューションです。
ジョシュアダンス

2
@JoshuaDance、フォーム/送信を既に持っていることは問題ではありません。ページには多くのフォーム(ネストされていない)があり、それぞれに独自の送信があります。各フォームのすべてのフィールドは、そのフォームの送信のみをトリガーします。この回答で述べたように
フレデリック

回答:


1426

jQueryでは、以下が機能します。

$("#id_of_textbox").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#id_of_button").click();
    }
});

$("#pw").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#myButton").click();
    }
});

$("#myButton").click(function() {
  alert("Button code executed.");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton">Submit</button>

またはプレーンJavaScriptでは、次のように機能します。

document.getElementById("id_of_textbox")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("id_of_button").click();
    }
});

document.getElementById("pw")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("myButton").click();
    }
});

function buttonCode()
{
  alert("Button code executed.");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton" onclick="buttonCode()">Submit</button>


12
event.keyCodeまたはevent.charCodeよりもevent.whichをクエリする方がおそらく良い方法です。developer.mozilla.org/ en / DOM / event.charCode#Notesを参照して
ウィリアムNiu

25
keydownkeyup使用するのに適したイベントではありません。また、asp.netを使用している場合はreturn false、最後にasp.netがイベントをインターセプトしないようにする必要があります。
maxp

144
使用に関する問題keydownは、Enterキーを押し続けるとイベントが何度も発生することです。keyupイベントにアタッチした場合、キーが離されたときにのみイベントが発生します。
スティーブパウロ

26
私のページにフォームがある間、関数をevent.preventDefault();呼び出す前に追加するコードを微調整しましたが、とにかく、それが私にとって唯一有効なハンドラーだったのでclick();切り替えました。きちんとしたコードのおかげです!keyupkeypress
エイドリアンK.

7
公平を期すために、この回答が投稿されたとき、jQueryはJSとほとんど同義でした。しかし今、jQueryを完全に回避している多くの人(Reactのようなものを使用しているときはkbの浪費であるため)は、JSの質問への回答を検索するときにイライラし、多くの場合、最初に出てくるのは私たちが使用しないライブラリーです頼りたくない。
アンディ

402

それをコーディングするだけです!

<input type = "text"
       id = "txtSearch" 
       onkeydown = "if (event.keyCode == 13)
                        document.getElementById('btnSearch').click()"    
/>

<input type = "button"
       id = "btnSearch"
       value = "Search"
       onclick = "doSomething();"
/>

5
うん、私はほとんどそれをやった。個人的な好みだと思います...もっとモジュール化したアプローチが好きです。;)
kdenney 2008

9
フォームの送信を停止する必要がある場合:onkeydown = "if(event.keyCode == 13){document.getElementById( 'btnSubmit')。click(); event.returnValue = false; event.cancel = true;}"
ガブリエルチョン

3
インラインメソッドでは、同様のコードを含む関数を呼び出す代わりに、呼び出しでfalseを返し、ポストバックを回避できるため、これは私にとってはうまくいきました。私の場合、「click」メソッドは__doPostback非同期呼び出しを呼び出し、「return false」を使用しません。ページをリロードするだけです。
デイブ

3
私はサムに同意します。このインラインJSコードを含むこのコードは地獄のように醜いです。常にHTMLコードとJavaScriptコードを分離する必要があります。
Sk8erPeter 2013年

9
@Sam 人形から知恵を得ることはありません。痛みは恐怖につながり、恐怖は心を殺すものです。恐怖は完全な破壊をもたらす小さな死です。私は恐れに直面します。私はそれが私の上を通り抜けることを許します。そしてそれが過ぎてしまったら、私はその目を向けるために内側の目を向けます。恐れがなくなったところには何もありません。インラインイベントハンドラを除く。したがって、はい、この回答のように、イベントハンドラをビュー/マークアップから分離してください。; ^)
ruffin

179

これを考え出した:

<input type="text" id="txtSearch" onkeypress="return searchKeyPress(event);" />
<input type="button" id="btnSearch" Value="Search" onclick="doSomething();" />

<script>
function searchKeyPress(e)
{
    // look for window.event in case event isn't passed in
    e = e || window.event;
    if (e.keyCode == 13)
    {
        document.getElementById('btnSearch').click();
        return false;
    }
    return true;
}
</script>

22
e = e || window.event; //イベントを取得する最短の方法
Victor

2
最高のプレーンJavaScriptオプション。HTMLの属性として追加されたJavaScriptはスペースを消費し、jQueryは単なるjQueryです(互換性は保証されません)。解決策をありがとう!
boxspah 2015年

そして、if内でfalseを返す場合、キーがさらに処理されるのを回避できます。<input type = "text" id = "txtSearch" onkeypress = "searchKeyPress(event);" /> <input type = "button" id = "btnSearch" Value = "Search" onclick = "doSomething();" /> <script> function searchKeyPress(e){//イベントがe = eに渡されない場合にwindow.eventを探します|| window.event; if(e.keyCode == 13){document.getElementById( 'btnSearch')。click(); falseを返します。} trueを返します。} </ SCRIPT>
ホセ・ゴメス・

83

ボタンを送信要素にすると、自動になります。

<input type = "submit"
       id = "btnSearch"
       value = "Search"
       onclick = "return doSomething();"
/>

<form>これを機能させるには、入力フィールドを含む要素が必要になることに注意してください(Sergey Ilinskyに感謝)。

標準の動作を再定義することはお勧めできません。Enterキーは常にフォームの送信ボタンを呼び出す必要があります。


30
おい!彼の質問全体を読んでください。ページにはすでに別の送信ボタンがあるので、これは彼にはうまくいきません。
skybondsor 2014年

5
おもしろいことに、私は最近これをSharePointで実行しようとしました。ただし、SharePointには、すべてのコンテンツをラップするフォームが既にあり、<form>タグは、他の自由なHTMLパーサーによってスローされます。したがって、キープレスまたはバストをハイジャックする必要があります。(ところで、SharePointでEnterキーを押すと、何らかの理由で編集モードが起動します。リボンが同じフォームを使用していると思います。)

1
<button type="submit" onclick="return doSomething(this)">Value</button>に動作します。手掛かりはreturnキーワード内にあります
Gus

77

addEventListenerまだ誰も使っていないので、これが私のバージョンです。要素を考えると:

<input type = "text" id = "txt" />
<input type = "button" id = "go" />

私は以下を使用します:

var go = document.getElementById("go");
var txt = document.getElementById("txt");

txt.addEventListener("keypress", function(event) {
    event.preventDefault();
    if (event.keyCode == 13)
        go.click();
});

これにより、HTMLをクリーンに保ちながら、イベントタイプとアクションを個別に変更できます。

<form>これらの要素をこれらの要素で囲んだときにEnterキーを押すとフォームが送信されてページが再読み込みされるため、これがの外であることを確認することはおそらく価値があることに注意してください。発見するために数回の瞬きをしました。

補遺:@ruffinのコメントのおかげで、欠落しているイベントハンドラーとを追加しpreventDefaultて、このコードが(おそらく)フォーム内でも機能できるようにしました。(私はこれをテストするために移動し、その時点で括弧で囲まれたコンテンツを削除します。)


14
JQeueryの回答の方が賛成票が多い理由が本当にわかりません。私はウェブ開発コミュニティのために泣きます。
デビッド

1
あなたが本当に欠けているのはあなたのキープレスハンドラの引数とe.preventDefault()それをフォームで動作させるためのものです。私の(新しい)回答を参照しください。
ruffin

5
ユーザーが実際にデータを入力することを意図しない限り、実際には次のようなことをする必要がありますif (event.keyCode == 13) { event.preventDefault(); go.click();}
非同期

1
この小さなことだけのためにjQueryを使用するのは確かに役に立ちません。また、CSPで簡単に動作し、ロードにかかる時間が短くなります。できればこれを使ってください。
Avamander 2017

59

プレーンJavaScriptでは、

if (document.layers) {
  document.captureEvents(Event.KEYDOWN);
}

document.onkeydown = function (evt) {
  var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
  if (keyCode == 13) {
    // For Enter.
    // Your function here.
  }
  if (keyCode == 27) {
    // For Escape.
    // Your function here.
  } else {
    return true;
  }
};

返事がjQueryだけで与えられていることに気づいたので、プレーンなJavaScriptで何かを与えることも考えました。


20
document.layers?まだNetscapeをサポートしていますか?!!
ビクター

6
いいえ、Netscapeをサポートする必要はありません。 blog.netscape.com/2007/12/28/...
kingdango

7
netscape.comはもう存在しません(それはaol.comにリダイレクトします)が、それでもなお、nescapeをサポートしている人々がいます。
LeartS 14

6
evt.which ? evt.which : evt.keyCodeと等しいevt.which || evt.keyCode
ユーザーの

3
@LeartS ネットスケープを使っている人がまだいるからだと思います。
SantiBailors 2015年

23

このために使用できる基本的なトリックの1つは、私が十分に言及しているのを見ていません。Ajaxアクションを実行したい場合、またはEnterで他の作業をしたいが実際にフォームを送信したくない場合は、次のようにできます。

<form onsubmit="Search();" action="javascript:void(0);">
    <input type="text" id="searchCriteria" placeholder="Search Criteria"/>
    <input type="button" onclick="Search();" value="Search" id="searchBtn"/>
</form>

action = "javascript:void(0);"を設定します これは基本的にデフォルトの動作を防ぐためのショートカットです。この場合、Enterキーを押すかボタンをクリックするかに関係なくメソッドが呼び出され、データを読み込むためにAjax呼び出しが行われます。


これは、モバイルデバイスをサポートするための優れたソリューションです。Androidデバイスのキーボードは自動的に非表示になり、さらにに追加するsearchCriteria.blur();とiOSも非表示になりonsubmitます。
アーロンギリオン

このページにはすでに別の送信ボタンがあるため、これは機能しません。
ホセ・ゴメス

@JoseGómez、ページには、対応するフィールドのみによってトリガーされる、開発者が望む数の送信ボタンを含めることができます。フィールド/サブミットのグループごとに異なるフォームを持つ必要があります。ページは単一のフォームに限定されません。
フレデリック

@Frederic:他の送信ボタンが同じフォームにあると私が誤解した質問から(「現在のページにはすでに別の送信ボタンがあるため、ボタンを送信ボタンにすることはできません。」)
JoseGómez16年

1
カスタムアクションが可能でありながら、一連の豪華なオーバーライドコードが不要であるため、これは素晴らしい回答です。
Beejor

16

それを試してみてください:

<input type="text" id="txtSearch"/>
<input type="button" id="btnSearch" Value="Search"/>

<script>             
   window.onload = function() {
     document.getElementById('txtSearch').onkeypress = function searchKeyPress(event) {
        if (event.keyCode == 13) {
            document.getElementById('btnSearch').click();
        }
    };

    document.getElementById('btnSearch').onclick =doSomething;
}
</script>

15

Enterキーを押すたびに検索をトリガーするには、次のようにします。

$(document).keypress(function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '13') {
        $('#btnSearch').click();
    }
}

14
onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btnSearch').click();}};"

これは、私がやや最近のプロジェクトから持っているものにすぎません...私はそれをネットで見つけました。そして、より良い方法があるかどうか、プレーンな古いJavaScriptであるかどうかわかりません。



13

フォームにフィールドが1つと送信ボタンが1つしかない限り、ページに別のフォームがある場合でも、Enterキーを押すとフォームが送信されます。

次に、jsを使用してonsubmitのフォームをキャプチャし、必要な検証またはコールバックを実行できます。


13

しばらくの間利用できるhtml属性「accesskey」に誰も気づきませんでした。

これは、キーボードショートカットにJavaScriptを使用しない方法です。

accesskey_browsers

MDNのaccesskey属性のショートカット

このように使用することを意図しています。html属性自体で十分ですが、ブラウザーやOSに応じてプレースホルダーやその他のインジケーターを変更することができます。スクリプトは、アイデアを与えるためのテストされていないスクラッチアプローチです。あなたは小さなクッパのようなブラウザライブラリ検出器を使用したいかもしれません

let client = navigator.userAgent.toLowerCase(),
    isLinux = client.indexOf("linux") > -1,
    isWin = client.indexOf("windows") > -1,
    isMac = client.indexOf("apple") > -1,
    isFirefox = client.indexOf("firefox") > -1,
    isWebkit = client.indexOf("webkit") > -1,
    isOpera = client.indexOf("opera") > -1,
    input = document.getElementById('guestInput');

if(isFirefox) {
   input.setAttribute("placeholder", "ALT+SHIFT+Z");
} else if (isWin) {
   input.setAttribute("placeholder", "ALT+Z");
} else if (isMac) {
  input.setAttribute("placeholder", "CTRL+ALT+Z");
} else if (isOpera) {
  input.setAttribute("placeholder", "SHIFT+ESCAPE->Z");
} else {'Point me to operate...'}
<input type="text" id="guestInput" accesskey="z" placeholder="Acces shortcut:"></input>


1
アクセスには2つありsます。
カイザー2016

3
key = ENTERの特殊なケースに関するOPの質問に答えていないようです
Ozan Bellik

12

これは、そこにいるすべてのYUI愛好家のためのソリューションです。

Y.on('keydown', function() {
  if(event.keyCode == 13){
    Y.one("#id_of_button").simulate("click");
  }
}, '#id_of_textbox');

この特別なケースでは、ボタン機能が挿入されたDOMオブジェクトをトリガーするためにYUIを使用した方が良い結果が得られましたが、これは別の話です...


12

ではAngular2

(keyup.enter)="doSomething()"

ボタンに視覚的なフィードバックが必要ない場合は、ボタンを参照せずにコントローラーを直接呼び出すことをお勧めします。

また、IDは必要ありません。ビューとモデルを分離するもう1つのNG2の方法です。


1
ここからkeyupオプションに関するさらに詳細についての質問です:stackoverflow.com/q/32155887/435605
AlikElzin-kilaka

10

この場合は、[投稿]から[サーバー]に移動してEnterボタンを無効にし、JSスクリプトを実行します。

<input type="text" id="txtSearch" onkeydown="if (event.keyCode == 13)
 {document.getElementById('btnSearch').click(); return false;}"/>
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

9

このonchangeの試みは近いですが、ブラウザに関しては前と後(Safari 4.0.5とFirefox 3.6.3)で正しく動作しないため、最終的にはお勧めしません。

<input type="text" id="txtSearch" onchange="doSomething();" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

また、フォーカスが外れたときにトリガーされることにも言及する必要があります。
FluorescentGreen5

8
event.returnValue = false

イベントを処理するとき、またはイベントハンドラーが呼び出す関数で使用します。

少なくともInternet ExplorerとOperaで動作します。


8

jqueryモバイルの場合、私はしなければなりませんでした

$('#id_of_textbox').live("keyup", function(event) {
    if(event.keyCode == '13'){
    $('#id_of_button').click();
    }
});

2
.livejQuery 1.7では非推奨です。jQuery Mobileではまだ問題ないと考えられていますか?
Barmar 2012年

8

対処完全に無地のJavaScriptソリューションを追加するにはフォーム送信にicedwaterの問題@を、ここに完全なソリューションだform

注:これは、IE9 +を含む「最新のブラウザ」用です。IE8バージョンはそれほど複雑ではなく、ここ学習できます


フィドル:https : //jsfiddle.net/rufwork/gm6h25th/1/

HTML

<body>
    <form>
        <input type="text" id="txt" />
        <input type="button" id="go" value="Click Me!" />
        <div id="outige"></div>
    </form>
</body>

JavaScript

// The document.addEventListener replicates $(document).ready() for
// modern browsers (including IE9+), and is slightly more robust than `onload`.
// More here: https://stackoverflow.com/a/21814964/1028230
document.addEventListener("DOMContentLoaded", function() {
    var go = document.getElementById("go"),
        txt = document.getElementById("txt"),
        outige = document.getElementById("outige");

    // Note that jQuery handles "empty" selections "for free".
    // Since we're plain JavaScripting it, we need to make sure this DOM exists first.
    if (txt && go)    {
        txt.addEventListener("keypress", function (e) {
            if (event.keyCode === 13)   {
                go.click();
                e.preventDefault(); // <<< Most important missing piece from icedwater
            }
        });

        go.addEventListener("click", function () {
            if (outige) {
                outige.innerHTML += "Clicked!<br />";
            }
        });
    }
});

1
説明なしの反対投票はあなたの懸念への対処を困難にします。正しくないと思われる点があればお知らせください。フォローアップさせていただきます。
ルフィン、

7

現代では、(なしundeprecated keyCodeonkeydownJavascriptを):

<input onkeypress="if(event.key == 'Enter') {console.log('Test')}">

これは私の意見では、仕事をする最も簡単な答えです。私の使用例では、onkeypress = "inputKeyPressed(event)"にアップグレードしてから、関数自体のevent.whichパラメータを処理しました。たとえば、Enterキーを押すと、event.whichが13として返されます
ak93

5
document.onkeypress = function (e) {
 e = e || window.event;
 var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
 if (charCode == 13) {

        // Do something here
        printResult();
    }
};

私の2セントです。私はWindows 8のアプリに取り組んでおり、Enterボタンを押したときにボタンにクリックイベントを登録させたいと思っています。私はJSでこれを行っています。私はいくつかの提案を試しましたが、問題がありました。これは問題なく動作します。


ドキュメントにイベントハンドラーを配置するためのやり過ぎの一種。あなたがcharCode他のどこかで13の場合は、あなたは発砲していprintResult()ます。
ruffin

5

jQueryでそれを行うには:

$("#txtSearch").on("keyup", function (event) {
    if (event.keyCode==13) {
        $("#btnSearch").get(0).click();
    }
});

通常のJavaScriptでそれを行うには:

document.getElementById("txtSearch").addEventListener("keyup", function (event) {
    if (event.keyCode==13) { 
        document.getElementById("#btnSearch").click();
    }
});

5

簡潔さとモダンなjsアプローチが好きな人のために。

input.addEventListener('keydown', (e) => {if (e.keyCode == 13) doSomething()});

ここで、inputは入力要素を含む変数です。


1

最新のJS keyCodeは非推奨のため、key代わりに使用してください

searchInput.onkeyup = function (e) {
    if (e.key === 'Enter') {
        searchBtn.click();
    }
}

0

jQueryでは、を使用できますevent.which==13。をお持ちの場合は、(フォームの送信に正しいイベントリスナーを追加して)form使用できます$('#formid').submit()

$('#textfield').keyup(function(event){
   if(event.which==13){
       $('#submit').click();
   }
});
$('#submit').click(function(e){
   if($('#textfield').val().trim().length){
      alert("Submitted!");
   } else {
    alert("Field can not be empty!");
   }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="textfield">
Enter Text:</label>
<input id="textfield" type="text">
<button id="submit">
Submit
</button>



-4

これも役立つかもしれませんが、うまく機能する小さなJavaScript関数です。

<script type="text/javascript">
function blank(a) { if(a.value == a.defaultValue) a.value = ""; }

function unblank(a) { if(a.value == "") a.value = a.defaultValue; }
</script> 
<input type="text" value="email goes here" onfocus="blank(this)" onblur="unblank(this)" />

この質問は解決されたと思いますが、他の人に役立つ何かを見つけました。


5
問題は、テキストボックスのEnterキーでボタンのクリックをトリガーすることでした。あなたのソリューションは、「透かし」タイプの機能です。
kdenney
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.