使用JavaScript在输入框中的回车键上触发按钮单击

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

我的当前页面上已经有一个不同的提交按钮,所以我不能简单地将该按钮设为提交按钮。而且,如果从这个输入框中按下,我只有希望输入键单击这个特定的按钮,没有别的。

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

使按钮成为提交元素,因此它将是自动的。

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

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

重新定义标准行为不是一个好的做法,输入键应该始终调用表单上的提交按钮。

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

想到了这个:

<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 ine = e || window.event;if (e.keyCode == 13){document.getElementById('btnSearch').click();return false;}return true;}</script>

然后把它编码进去!

<input type = "text"id = "txtSearch"onkeydown = "if (event.keyCode == 13)document.getElementById('btnSearch').click()"/>
<input type = "button"id = "btnSearch"value = "Search"onclick = "doSomething();"/>
onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btnSearch').click();}};"

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

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

然后,您可以使用js捕获表单on提交并执行您想要的任何验证或回调。

event.returnValue = false

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

它至少适用于Internet Explorer和Opera。

这个的尝试很接近,但是在浏览器上的行为不端(在Safari4.0.5和Firefox 3.6.3上),所以最终,我不推荐它。

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

在纯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给出一些东西。

这也可能有所帮助,一个小的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)" />

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

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

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

对于jQuery Mobile,我必须做:

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

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

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

在这个特殊情况下,我确实使用YUI触发注入按钮功能的DOM对象有更好的结果——但这是另一个故事……

你可以使用的一个基本技巧,我还没有看到完全提到。如果你想做一个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: ull(0);"本质上是防止默认行为的快捷方式。在这种情况下,无论您点击回车键还是单击按钮,都会调用一个方法,并调用ajax来加载一些数据。

由于还没有人使用过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();});

这允许您单独更改事件类型和操作,同时保持超文本标记语言干净。

说明,确保这是在<form>之外可能是值得的,因为当我将这些元素包含在它们中时,按回车键提交表单并重新加载页面。花了我一些眨眼才发现。

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

document.onkeypress = function (e) {e = e || window.event;var charCode = (typeof e.which == "number") ? e.which : e.keyCode;if (charCode == 13) {
// Do something hereprintResult();}};

这是我的两分钱。我正在开发一个适用于Windows 8的应用程序,并希望在我按下回车键时该按钮注册一个单击事件。我正在用JS做这件事。我尝试了几个建议,但遇到了问题。这工作得很好。

试试看:

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

在这种情况下,您还需要将回车按钮从发布到服务器并执行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();" />

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

Angular2

(keyup.enter)="doSomething()"

如果您不希望在按钮中获得一些视觉反馈,那么不引用按钮而是直接调用控制器是一个很好的设计。

此外,不需要id-这是NG2在视图和模型之间分离的另一种方式。

要添加一个针对@icedwater表单提交的问题的完全普通的JavaScript解决方案,这里有一个完整的解决方案与#0

注:这适用于“现代浏览器”,包括IE9+。IE8版本并不复杂,可以是在这里学到


小提琴:https://jsfiddle.net/rufwork/gm6h25th/1/

超文本标记语言

<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/1028230document.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 />";}});}});

没有人注意到HTML的“访问键”,它已经有一段时间了。

这是一种没有javascript的键盘快捷键方式。

accesskey_browsers

访问键属性MDN上的快捷方式

打算这样使用。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>

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

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

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

使用keypressevent.key === "Enter"与现代JS!

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

Mozilla文档

支持的浏览器

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

在现代的、未弃用的(没有keyCodeonkeydown)Javascript中:

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

我开发了自定义javascript来实现这个功能,只需添加类

示例:<button type="button" class="ctrl-p">Custom Print</button>

点击这里查看小提琴

// find elementsvar banner = $("#banner-message")var button = $("button")
// handle click and add classbutton.on("click", function(){if(banner.hasClass("alt"))banner.removeClass("alt")elsebanner.addClass("alt")})
$(document).ready(function(){$(document).on('keydown', function (e) {        
if (e.ctrlKey) {$('[class*="ctrl-"]:not([data-ctrl])').each(function (idx, item) {var Key = $(item).prop('class').substr($(item).prop('class').indexOf('ctrl-') + 5, 1).toUpperCase();$(item).attr("data-ctrl", Key);$(item).append('<div class="tooltip fade top in tooltip-ctrl alter-info" role="tooltip" style="margin-top: -61px; display: block; visibility: visible;"><div class="tooltip-arrow" style="left: 49.5935%;"></div><div class="tooltip-inner"> CTRL + ' + Key + '</div></div>')});}         
if (e.ctrlKey && e.which != 17) {var Key = String.fromCharCode(e.which).toLowerCase();if( $('.ctrl-'+Key).length == 1) {e.preventDefault();if (!$('#divLoader').is(":visible"))$('.ctrl-'+Key).click();console.log("You pressed ctrl + "+Key );}}});$(document).on('keyup', function (e) {if(!e.ctrlKey ){$('[class*="ctrl-"]').removeAttr("data-ctrl");$(".tooltip-ctrl").remove();}})});
#banner-message {background: #fff;border-radius: 4px;padding: 20px;font-size: 25px;text-align: center;transition: all 0.2s;margin: 0 auto;width: 300px;}
#banner-message.alt {background: #0084ff;color: #fff;margin-top: 40px;width: 200px;}
#banner-message.alt button {background: #fff;color: #000;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="banner-message"><p>Hello World</p><button class="ctrl-s" title="s">Change color</button><br/><br/><span>Press CTRL+S to trigger click event of button</span></div>

--或者--
查看运行示例https://stackoverflow.com/a/58010042/6631280

注意:在当前逻辑上,您需要按Ctrl+输入

短工作纯JS

txtSearch.onkeydown= e => (e.key=="Enter") ? btnSearch.click() : 1

txtSearch.onkeydown= e => (e.key=="Enter") ? btnSearch.click() : 1
function doSomething() {console.log('💩');}
<input type="text" id="txtSearch" /><input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

这些天change事件是方式!

document.getElementById("txtSearch").addEventListener('change',() => document.getElementById("btnSearch").click());

我的可重用的香草JS解决方案。所以你可以改变哪个按钮被击中,这取决于哪个元素/文本框是活动的。

 <input type="text" id="message" onkeypress="enterKeyHandler(event,'sendmessage')" /><input type="button" id="sendmessage" value="Send"/>

function enterKeyHandler(e,button) {e = e || window.event;if (e.key == 'Enter') {document.getElementById(button).click();}}

您可以在jQuery中尝试以下代码。

$("#txtSearch").keyup(function(e) {e.preventDefault();var keycode = (e.keyCode ? e.keyCode : e.which);if (keycode === 13 || e.key === 'Enter'){$("#btnSearch").click();}});