使用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="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> #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 : //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 />";}});}
});
#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中使用keypress和event.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="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> #24楼
在不推荐使用的现代（无keyCode或onkeydown ）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();}
}
使用JavaScript在文本框中的Enter键上触发按钮单击相关推荐
- JavaScript去除文本框中重复内容 js去重复
//数据存在于list这个输入框中,然后直接调用此函数 function process() {var list = document.getElementById('list');arr = lis ...
- javascript html 文本框插入文本,javascript – 在文本框中输入文本
演示: jsFiddle HTML: nelson justin JS: function selectedItemChange(sel) { document.getElementById('tes ...
- 文本框禁用后（readonly=readonly），光标置于文本框中按后退键，页面后退的解决方案...
//处理键盘事件 禁止后退键(Backspace)密码或单行.多行文本框除外 function forbidBackSpace(e){ var ev = e || window.event;//获取e ...
- php文本输入数字,JavaScript实现文本框只能输入数字的方法介绍
在我们日常开发中,为了更好的给用户带来体验,我们有的时候需要限制文本框输入内容的类型,这里我们很多时候都会使用到正则表达式来完成,今天我们就给大家介绍下JavaScript实现文本框只能输入数字.小数 ...
- Javascript - 获取到textarea文本框中的回车换行符 - 收集/实践 --- 20201005
1.应用场景 主要用于获取到textarea文本框中的回车换行符 2.学习/操作 1. 文档 javascript获取到textarea文本框中的回车换行符 - Wuya - 博客园 js如何识别出字 ...
- javascript 获取光标所选中的内容并插入到另一个文本框中(兼容ie和ff）
项目中正好用到 做下笔记方便以后查找 ie获取光标的位置使用document.selection.createRange() 火狐下使用document.getElementById(id).sele ...
- html获取文本框中的文字,JavaScript实现input输入框点击获取文字内容
Js实现INPUT输入框,当鼠标点击文字时自动获取文字内容,并显示在文本框中,一个惯用的表单技巧,有时可省去一些用户输入的麻烦,可有效提升用户体验. input输入框获取js点击文字内容 .c{ wi ...
- javascript学习之使文本框中不能输入数字
经过测试,无法在文本框中输入数字!
- JavaScript - 正则(RegExp)判断文本框中是否包含特殊符号
前言 有时,我们希望判断文本框中用户输入的字符是否含有特殊符号(*/#$@),就像用户注册时密码框的填写. demo 利用 RegExp 对象,能很优雅的实现以上需求: // even(文本框内容) ...
最新文章
- 启用无密码方式登录ssh
- oracle 条件动态视图,oracle最重要的9个动态性能视图
- css面试基础知识,CSS知识点与面试题解析
- Android Toolbar Padding
- 使用curl下载上传ftp
- cocos2dx libevent简介和使用
- 电脑无法打开特定网页_监理检测网校电脑微信无法打开公路试验检测视频课程的处理方法...
- java long 除法运算_java基础知识学习文档二
- MongoDB数据库基础教程
- 耦合电感元件的相关概念
- PS笔记1_如何制作电子签名
- 一句话马密码暴力破解篇（黑吃黑）
- 《安富莱嵌入式周报》第249期：2022.01.17--2022.01.23
- python批量查询ip归属地_python3.2批量查询IP地址区域
- 中文单栏latex模板
- 交叉表的概念及sql中交叉表的使用
- yolov3执行reval_voc_py3文件过程出现的错误记录及解决
- PowerBI-时间智能函数-PREVIOUS系列
- 欧盟委员会同意加大网络安全工作资金投入
- 【Qt】 Pro工程管理文件介绍