テキスト入力とボタンが1つずつあります(下図参照)。テキストボックスの中でEnterキーが押されたときに、JavaScriptを使ってボタンのクリックイベントを**トリガーするにはどうすればよいでしょうか?
現在のページにはすでに別の送信ボタンがあるので、このボタンを単に送信ボタンにすることはできません。そして、このテキストボックスの中から、Enterキーが押された場合のみ、この特定のボタンをクリックさせたいのです。
<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: <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: <input id="pw" type="password"><br>
<button id="myButton" onclick="buttonCode()">Submit</button>
これを把握した。
<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>
ボタンをsubmit要素にすることで、自動化されます。
<input type = "submit"
id = "btnSearch"
value = "Search"
onclick = "return doSomething();"
/>
なお、これを実現するためには、入力フィールドを含む <form>
要素が必要です(Sergey Ilinskyさんに感謝します)。
標準的な動作を再定義するのは良い習慣とは言えません、 Enter キーは常にフォームの送信ボタンを呼び出すべきです。
まだ「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」を追加して、このコードが(おそらく)フォーム内でも機能できるようにしました。 (これをテストし、その時点で括 ⁇ で囲まれたコンテンツを削除します。)。
プレーン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でも何かを与えることを考えました。
私が完全に言及していない、これに使用できる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>
アクションの設定= "javascript:void(0);"このようなデフォルトの動作を本質的に防止するためのショートカットです。 この場合、Enterキーを押すかボタンをクリックするかをメソッドが呼び出し、一部のデータをロードするためにajax呼び出しが行われます。
やってみて:。
<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>
onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btnSearch').click();}};"
これは、やや最近のプロジェクトからのものです。.. 私はそれをネットで見つけました、そして、より良い方法があるかどうか、私は普通の古いJavaScriptにないかどうかわかりません。
keypress
と event.key === "Enter"
を最新のJSで使用します。!#。const textbox = document.getElementById("txtSearch");
textbox.addEventListener("keypress", function onEvent(event) {
if (event.key === "Enter") {
document.getElementById("btnSearch").click();
}
});
しばらく前から入手できるhtml attibute "accesskey"に誰も気づきませんでした。
これは、キーボードのショートカットのものに対するJavaScriptなしの方法です。
。。
このように使用することを目的としています。 html属性自体で十分です。ブラウザーとosに応じて、プレースホルダーやその他のインジケーターを変更できます。 スクリプトは、アイデアを与えるためのテストされていないスクラッチアプローチです。 小さなクッパのようなブラウザライブラリ検出器を使用することをお勧めします。
<。!-スニペットを開始:js hide:false console:true babel:false -->。
<input type="text" id="guestInput" accesskey="z" placeholder="Acces shortcut:"></input>
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...'}
<。!-終了スニペット-->。
これは、 YUI愛好家のすべてに対するソリューションです。
Y.on('keydown', function() {
if(event.keyCode == 13){
Y.one("#id_of_button").simulate("click");
}
}, '#id_of_textbox');
この特別なケースでは、ボタン機能が注入されたDOMオブジェクトをトリガーするためにYUIを使用したより良い結果が得られましたが、これは別の話です。..
このインケースでは、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();" />
@icedwaterのフォーム送信に関する問題に対処する完全にプレーンなJavaScriptソリューションを追加するには、 form
を含む完全なソリューションを次に示します。
注:これはIE9 +を含む「モダンブラウザ」用です。 IE8バージョンはそれほど複雑ではなく、[ここで学ぶ]ことができます(https://stackoverflow.com/a/21814964/1028230)。
フィドル:
。<body>
<form>
<input type="text" id="txt" />
<input type="button" id="go" value="Click Me!" />
<div id="outige"></div>
</form>
</body>
// 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 />";
}
});
}
});