使用JavaScript在文本框中的Enter键上触发按钮单击


1292

我有一个文本输入和一个按钮(见下文)。当在文本框中按下键时,如何使用JavaScript 触发按钮的click事件Enter

当前页面上已经有一个不同的“提交”按钮,因此我不能简单地将该按钮设为“提交”按钮。而且,如果Enter从该一个文本框中按下该键,我希望该键单击此特定按钮,没有别的。

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

1
对于像我这样的菜鸟的重要说明:这个问题的关键部分是您是否已经在页面上建立了表单,因此已经有了一个提交按钮。jQuery的答案是跨浏览器兼容的,是一个很好的解决方案。
2014年

2
@JoshuaDance,已经有一个表单/提交,这并不麻烦。一个页面可以具有多种形式(但不能嵌套),每种形式都有自己的提交。每个表单的每个字段将仅触发该表单的提交。正如这个答案所说。
弗雷德里克

Answers:


1426

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


12
查询event.which可能是比event.keyCode或event.charCode更好的做法,请参阅developer.mozilla.org/en/DOM/event.charCode#Notes
William Niu

25
keydown不是keyup更好的事件。另外,如果您使用的是asp.net,则必须return false在最后结束以阻止asp.net继续拦截该事件。
maxp 2012年

144
使用的问题keydown是,按住Enter会反复触发该事件。如果您附加到该keyup事件,则仅在释放密钥后才会触发。
史蒂夫·保罗

26
在页面具有表单的同时,我已经调整了event.preventDefault();调用click();函数之前添加的代码,并且我切换keyupkeypress它,因为它是我唯一的工作处理程序,无论如何,感谢整洁的代码!
Adrian K.

7
公平地说,发布此答案时,jQuery与JS几乎是同义词。但是现在我们当中很多完全避免使用jQuery的人(因为当您使用React之类的东西时,这只是kb的浪费),当我们寻找JS问题的答案时会感到恼火,而且通常出现的第一件事就是我们没有图书馆不想依靠。
安迪2015年

402

然后将其编码!

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

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

5
是的,我几乎做到了。我想这只是个人喜好...我喜欢模块化的方法。;)
kdenney

9
如果您需要停止提交表单:onkeydown =“ if(event.keyCode == 13){document.getElementById('btnSubmit')。click(); event.returnValue = false; event.cancel = true;}”
Gabriel Chung

3
这对我来说是有效的,因为事实上,内联方法(而不是调用包含相似代码的函数)允许您在调用时返回false并避免回发。在我的情况下,“ click”方法调用__doPostback异步调用,而没有“ return false;”。只会重新加载页面。
戴夫

3
我同意Sam的观点,这种带有内联JS代码的代码很难理解。您应该始终将HTML和JavaScript代码分开。
Sk8erPeter

9
@Sam永远不要人偶那里获得智慧。痛苦导致恐惧,恐惧是心灵的杀手。恐惧是带来彻底灭绝的小死。我将面对我的恐惧。我将允许它通过我并通过我。当它过去时,我会转向内在的目光,看看它的路径。恐惧消失的地方将一无所有。除了可能是内联事件处理程序。因此,是的,请按照此答案将事件处理程序与视图/标记分开。; ^)
ruffin 2015年

179

想通了:

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

22
e = e || window.event; //最短的方式来获得事件
维克多

2
最佳的普通JavaScript选项。将JavaScript作为HTML中的属性添加会占用空间,而jQuery只是jQuery(不保证兼容性)。感谢您的解决方案!
boxspah 2015年

并且如果在if中返回false,则可以避免进一步处理密钥:<input type =“ text” id =“ txtSearch” onkeypress =“ searchKeyPress(event);” /> <input type =“ button” id =“ btnSearch” Value =“ Search” onclick =“ doSomething();” /> <script> function searchKeyPress(e){//如果未在e = e ||中传递事件,则查找window.event window.event; 如果(e.keyCode == 13){document.getElementById('btnSearch')。click(); 返回false;}返回true; } </ script>
JoseGómez'15

83

将按钮设为Submit元素,这样它将是自动的。

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

请注意,您需要一个<form>包含输入字段的元素来完成这项工作(感谢Sergey Ilinsky)。

重新定义标准行为不是一个好习惯,Enter密钥应始终调用表单上的“提交”按钮。


30
帅哥!阅读他的整个问题。页面上已经有另一个提交按钮,因此这对他不起作用。
skybondsor 2014年

5
有趣的是,我最近尝试在SharePoint中执行此操作。但是,SharePoint已经拥有一种可以包装所有内容的表单,并且其他所有<form>标记都被原本自由的HTML解析器丢弃。因此,我必须劫持按键或关闭按键。(顺便说一句,由于某种原因,在SharePoint中按Enter会启动“编辑”模式。我猜功能区使用的是相同的表单。)

1
一个<button type="submit" onclick="return doSomething(this)">Value</button>作品。线索在于return关键字
Gus

77

由于没有人使用过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干净的同时分别更改事件类型和操作。

请注意,可能有必要确保它不在a之内,<form>因为当我将这些元素封装在其中时,按Enter提交了表单并重新加载了页面。让我眨了眨眼才发现。

附录:感谢@ruffin的评论,我添加了缺少的事件处理程序和,preventDefault以允许此代码(大概)也可以在表单内工作。(我将对此进行测试,这时将删除括号中的内容。)


14
我真的不明白为什么JQeuery的答案会有更多支持。我为网站开发社区而哭。
大卫

1
您真正缺少的只是在按键处理程序中的一个参数,以及一个e.preventDefault()使其与表单一起使用的参数。请参阅我的(新)答案
鲁芬,2015年

5
除非您不打算让用户实际输入任何数据,否则您应该真正执行类似的操作if (event.keyCode == 13) { event.preventDefault(); go.click();}
不同步的

1
仅将jQuery用于此微小的事情肯定是没有用的。它也可以与CSP一起轻松工作,并且加载时间更少。如果可以,请使用它。
Avamander '17

59

在纯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给出一些内容。


20
document.layers?您还在支持Netscape吗?!
维克多

6
不,您不需要支持Netscape。 blog.netscape.com/2007/12/28/…–
kingdango

7
netscape.com甚至不存在了(它重定向到aol.com),但是仍然有人支持nescape,令人惊叹。
LeartS 2014年

6
evt.which ? evt.which : evt.keyCode等于evt.which || evt.keyCode
用户

3
@LeartS我敢打赌,这是因为仍然有人在使用 Netscape。
SantiBailors,2015年

23

您可以使用的一个基本技巧,但我尚未完全提及。如果要执行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调用以加载一些数据。


这是对移动设备支持的更好解决方案。它会自动在Android设备上隐藏键盘,在iOS设备(如果添加searchCriteria.blur();到)上也会隐藏键盘onsubmit
亚伦·吉利恩

该操作无效,因为页面中已经有另一个提交按钮。
何塞·戈麦斯

@JoseGómez,一个页面可以具有开发者希望的任意数量的提交按钮,仅由其相应的字段触发。每个字段/提交组仅需要具有不同的形式。页面不限于单一形式。
弗雷德里克

@Frederic:从我的问题(错了吗?)理解到另一个提交按钮的格式相同:“当前页面上已经有一个不同的提交按钮,所以我不能简单地将该按钮设为提交按钮。”
JoseGómez'16

1
这是一个很好的答案,因为它允许自定义操作,却避免了使用大量精美代码的需求。
Beejor

16

尝试一下:

<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

要在每次按下回车键时触发搜索,请使用以下命令:

$(document).keypress(function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '13') {
        $('#btnSearch').click();
    }
}

14
onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btnSearch').click();}};"

这只是我从一个最近的项目中得到的东西……我在网上找到了它,我不知道普通的旧JavaScript是否有更好的方法。


14

使用keypressevent.key === "Enter"拥有现代化的JS!

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

Mozilla文件

支持的浏览器


13

虽然,我很确定只要表单中只有一个字段和一个提交按钮,即使页面上还有另一种表单,按回车键也应提交该表单。

然后,您可以使用js捕获onsubmit表单,并执行所需的任何验证或回调。


13

一段时间以来没有人注意到html样式的“ accesskey”。

这是键盘快捷键内容的无JavaScript方法。

accesskey_browsers

MDN上的accesskey属性快捷方式

打算像这样使用。html属性本身就足够了,但是我们可以根据浏览器和操作系统来更改占位符或其他指示器。该脚本是一种未经测试的从头开始的想法。您可能要使用浏览器库检测器,例如小型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", "ALT+SHIFT+Z");
} else if (isWin) {
   input.setAttribute("placeholder", "ALT+Z");
} else if (isMac) {
  input.setAttribute("placeholder", "CTRL+ALT+Z");
} else if (isOpera) {
  input.setAttribute("placeholder", "SHIFT+ESCAPE->Z");
} else {'Point me to operate...'}
<input type="text" id="guestInput" accesskey="z" placeholder="Acces shortcut:"></input>


1
访问有两个s
kaiser

2
关于key = ENTER的特殊情况,似乎没有回答OP的问题
Ozan Bellik

12

这是针对所有YUI爱好者的解决方案:

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

在这种特殊情况下,使用YUI触发已注入按钮功能的DOM对象确实取得了更好的结果-但这是另一回事了...


12

Angular2中

(keyup.enter)="doSomething()"

如果您不希望按钮中有任何视觉反馈,那么最好不要引用按钮而是直接调用控制器。

另外,不需要id-在视图和模型之间进行分离的另一种NG2方法。


1
这是有关
按键

10

在这种情况下,您还希望禁用Enter按钮(从Posting到服务器)并执行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

这次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();" />

还应该提到它触发了不专心。
FluorescentGreen5

8
event.returnValue = false

在处理事件时或在事件处理程序调用的函数中使用它。

它至少可以在Internet Explorer和Opera中工作。


8

对于jQuery Mobile,我必须要做

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

2
.live在jQuery 1.7中已弃用。在jQuery Mobile中是否仍然可以确定?
Barmar 2012年

8

要添加一个完全普通的JavaScript的解决方案,解决@ icedwater的问题表单提交,这里是一个完整的解决方案form

注意:这适用于“现代浏览器”,包括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 />";
            }
        });
    }
});

1
没有解释的不合格票很难解决您的问题。让我知道看起来不对劲,我很乐意跟进。
鲁芬

7

在现代的,不推荐使用(不带keyCodeonkeydown)的Javascript中:

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

我认为这是完成工作的最简单答案。在我的用例中,我将其升级为onkeypress =“ inputKeyPressed(event)”,然后在函数本身中处理event.which参数。例如,Enter键返回事件。该事件为13。
ak93

5
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();
    }
};

这是我的两分钱。我正在为Windows 8开发一个应用程序,并希望在按下Enter按钮时该按钮注册一个单击事件。我在JS中执行此操作。我尝试了一些建议,但遇到了问题。这很好。


将事件处理程序放置在文档上的某种过分杀伤力。如果您charCode在其他任何地方都拥有13的筹码,那您就开除了printResult()
鲁芬2015年

5

要使用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

对于那些可能喜欢简洁和现代js方法的人。

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

其中input是包含输入元素的变量。


0

在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

对于keyUp不推荐使用的现代JS ,请key改用

searchInput.onkeyup = function (e) {
    if (e.key === 'Enter') {
        searchBtn.click();
    }
}

-4

一个小的JavaScript函数也可能会有所帮助,该函数可以正常工作:

<script type="text/javascript">
function blank(a) { if(a.value == a.defaultValue) a.value = ""; }

function unblank(a) { if(a.value == "") a.value = a.defaultValue; }
</script> 
<input type="text" value="email goes here" onfocus="blank(this)" onblur="unblank(this)" />

我知道这个问题已经解决,但是我发现了一些对其他人有帮助的东西。


5
问题是使用文本框中的回车键触发按钮单击。您的解决方案是针对“水印”类型的功能。
kdenney 2011年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.