BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] テキストボックスのEnterキーで、JavaScriptでボタンクリックをトリガーする

2022-03-20 01:56:50

質問

テキスト入力とボタンが1つずつあります（下図参照）。どのようにJavaScriptを使って ボタンのクリックイベントを発生させる のとき 入る が押されたとき、そのテキストボックスはどうなるのでしょうか？

現在のページにはすでに別の送信ボタンがあるので、単純に送信ボタンにすることはできないのですが。それと、私は だけ が必要です。 入る キーは、このテキストボックスから押された場合、この特定のボタンをクリックするようにします。 

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

解決方法は？

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>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します