☰

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

tag-icon • tag-icon javascript button onclick onkeydown onkeypress
テキストボックスのEnterキーでJavaScriptを使用してボタンクリックをトリガーする 質問する

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

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

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

ベストアンサー1

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>

おすすめ記事