700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 使用JavaScript在文本框中的Enter键上触发按钮单击

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

时间:2021-09-08 17:25:08

相关推荐

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

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

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

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

#1楼

对于jQuery Mobile,我必须要做

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

#2楼

将按钮设为Submit元素,因此它将是自动的。

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

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

重新定义标准行为不是一个好习惯,Enter键应始终调用表单上的Submit按钮。

#3楼

在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="/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="/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>

#4楼

想通了:

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

#5楼

然后将其编码!

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

#6楼

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

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

#7楼

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

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

#8楼

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

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

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

#9楼

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

#10楼

由于还没有人使用过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以允许此代码(大概)也可以在表单内工作。 (我将对此进行测试,这时将删除括号中的内容。)

#11楼

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开发一个应用程序,并希望在按下Enter按钮时该按钮注册一个点击事件。 我在JS中执行此操作。 我尝试了一些建议,但遇到了问题。 这样很好。

#12楼

event.returnValue = false

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

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

#13楼

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

#14楼

试试吧:

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

这种情况下,您还希望禁用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();" />

#16楼

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

#17楼

Angular2中

(keyup.enter)="doSomething()"

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

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

#18楼

要添加一个完整的JavaScript解决方案来解决@icedwater的表单提交问题 ,这里是一个带有form的完整解决方案。

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

小提琴: https : ///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: /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 />";}});}});

#19楼

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

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

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", "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...'}

<input type="text" id="guestInput" accesskey="z" placeholder="Acces shortcut:"></input>

#20楼

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

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

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

#21楼

在现代JS中使用keypressevent.key === "Enter"

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

Mozilla文件

支持的浏览器

#22楼

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

#23楼

在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="/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>

#24楼

在不推荐使用的现代(无keyCodeonkeydown)JavaScript中:

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

#25楼

一个小的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)" />

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

#26楼

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。