我有一个文本输入和一个按钮(见下文)。我如何使用JavaScript触发按钮的点击事件时，进入键按下文本框内?
在我的当前页面上已经有一个不同的提交按钮，所以我不能简单地将该按钮设置为提交按钮。并且，我只想让Enter键单击这个特定的按钮，如果它是从这个文本框中按下，没有其他。
<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
当前回答
不过，我非常确定，只要表单中只有一个字段和一个提交按钮，按回车键就应该提交表单，即使页面上还有另一个表单。
然后你可以用js在提交时捕获表单，并做任何你想要的验证或回调。
其他回答
那就把它编码进去!
<input type = "text"
id = "txtSearch"
onkeydown = "if (event.keyCode == 13)
document.getElementById('btnSearch').click()"
/>
<input type = "button"
id = "btnSearch"
value = "Search"
onclick = "doSomething();"
/>
我算出来了:
<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>
在jQuery中，你可以使用event.which==13。如果你有一个表单，你可以使用$('#formid').submit()(将正确的事件监听器添加到该表单的提交中)。
$ (' # textfield ') .keyup(函数(事件){ 如果(event.which = = 13) { $(" #提交”).click (); ｝ })； $(" #提交”).click(函数(e) { 如果($ (' # textfield ') .val () .trim () . length) { alert(“提交!”); }其他{ alert(“字段不能为空!”); ｝ })； < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> <标签= >“文本框” 输入文本:> < /标签 <input id="textfield" type="text"> <按钮id = "提交" > 提交 < /按钮>
为了添加一个完全简单的JavaScript解决方案来解决@icedwater的表单提交问题，这里有一个完整的表单解决方案。
注意:这是针对“现代浏览器”，包括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 />";
}
});
}
});
我已经通过添加类开发了自定义javascript来实现这个功能
例如:<button type="button" class="ctrl-p">自定义打印</button>
来看看提琴
//查找元素 Var banner = $("#banner-message") Var按钮= $("button") //添加类 按钮。(“点击”,函数(){ 如果(banner.hasClass(“alt”)) banner.removeClass(“alt”) 其他的 banner.addClass(“alt”) }) $(文档)时函数(){ 美元(文档)。On ('keydown'，函数(e) { if (e.ctrlKey) { $('[类* = " ctrl - "]:没有([data-ctrl])”)。每个(函数(idx, item) { var关键= $(项目).prop(类).substr(美元(项).prop(类).indexOf (ctrl -) + 5, 1) .toUpperCase (); 美元(项)。attr(“data-ctrl”键); 美元(项)。追加('<div class="tooltip fade top in tooltip-ctrl alter-info" role="tooltip" style="margin-top: -61px;显示:块;可见性:可见;<div class=" font - family:宋体" style=" font - family:宋体;" > < / div > < div class = " tooltip-inner " > CTRL + +键+”< / div > < / div >”) })； ｝ if (e.ctrlKey && e.which != 17) { var Key = String.fromCharCode(e.which).toLowerCase(); 如果($ (' .ctrl - ' +键)。长度== 1){ e.preventDefault (); 如果(! $ (' # divLoader ') .(":可见")) $ (' .ctrl——“+键).click (); console.log("You pressed ctrl + "+Key); ｝ ｝ })； 美元(文档)。On ('keyup'，函数(e) { 如果(e。ctrlKey) { $('[类* = " ctrl - "]”).removeAttr(“data-ctrl”); $ (" .tooltip-ctrl ") .remove (); ｝ }) })； # banner-message { 背景:# fff; border - radius: 4 px; 填充:20 px; 字体大小:25 px; text-align:中心; 过渡:全部0.2秒; 保证金:0自动; 宽度:300 px; ｝ # banner-message。alt { 背景:# 0084 ff; 颜色:# fff; margin-top: 40像素; 宽度:200 px; ｝ # banner-message。Alt键{ 背景:# fff; 颜色:# 000; ｝ < script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < /脚本> < div id = " banner-message " > < p > Hello World < / p > <button class="ctrl-s" title="s">改变颜色</button><br/><br/> <span>按CTRL+S触发按钮</span>的单击事件 < / div >
——或—— 查看运行示例 https://stackoverflow.com/a/58010042/6631280
注意:在当前逻辑上，需要按Ctrl + 输入
