web-dev-qa-db-ja.com

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

私は一つのテキスト入力と一つのボタンを持っています（下記参照）。 JavaScriptを使用してボタンのクリックイベントをトリガーする Enter テキストボックス内でキーが押されている？

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

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

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>
1352
Steve Paulo

それからそれをコーディングしてください。

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

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

これを考え出した：

<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>
171
kdenney

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

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

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

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

79
albertein

誰も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を追加して、このコードが（おそらく）フォーム内でも機能するようにしています。 （これをテストしますが、その時点で括弧で囲まれたコンテンツを削除します。）

73
icedwater

普通の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で何かを与えることを考えました。

58
Varun

私が十分に言及したことを見たことがないこれのためにあなたが使うことができる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呼び出しが行われます。

21
Switters

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

<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
mahbub_siddique

エンターキーを押すたびに検索を開始するには、これを使います。

$(document).keypress(function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '13') {
        $('#btnSearch').click();
    }
}
14
me_an
onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btnSearch').click();}};"

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

13
Max Schmeling

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

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

12
garrow

In - Angular 2 ：

(keyup.enter)="doSomething()"

ボタンに視覚的なフィードバックを表示したくない場合は、ボタンを参照せずに直接コントローラーを呼び出すのが良い設計です。

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

11
AlikElzin-kilaka

これは、すべての_ yui _の恋人に対する解決策です。

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

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

11
frhd

誰もがしばらく経ってから利用可能なhtml属性 "accesskey"に気づいたことがありません。

これはキーボードショートカットを使うためのJavaScriptのような方法ではありません。

accesskey_browsers

MDNのアクセスキー属性ショートカット

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

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", "Access keys: ALT+SHIFT+Z");
} else if (isWin) {
   input.setAttribute("placeholder", "Access keys: ALT+Z");
} else if (isMac) {
  input.setAttribute("placeholder", "Access keys: CTRL+ALT+Z");
} else if (isOpera) {
  input.setAttribute("placeholder", "Shortcut: SHIFT+ESCAPE->Z");
} else {'Point me to operate...'}
<input type="text" id="guestInput" accesskey="z" placeholder="Acces shortcut:"></input>
11
Cryptopat

最近のJSではkeypressとevent.key === "Enter"を使ってください。

const textbox = document.getElementById("txtSearch");
textbox.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        document.getElementById("btnSearch").click();
    }
});

Mozillaドキュメント

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

10
Gibolt

この場合、Postingからserverへの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
njoshsn

この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();" />
9
Luke Nezda
event.returnValue = false

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

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

8
ELEK

Jqueryモバイルのために私がしなければならなかった

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

@ icedwaterのフォーム送信に関する問題に対処した、完全にわかりやすいJavaScriptソリューションを追加するには 、これが完全なソリューションですwith form。

注： これは、IE 9以降を含む「最近のブラウザ」用です。 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 />";
            }
        });
    }
});
7
ruffin
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でやっています。私はいくつかの提案を試みましたが、問題がありました。これはうまく機能します。

5
Tequilaman

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
clickbait

現代では、推奨されていません（keyCodeまたはonkeydownなし）。Javascript：

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

簡潔さと現代的なアプローチが好きな人のために。

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

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

3
Alexandr Tsyganok

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>
0
hev1