我有一个文本输入和一个按钮(见下文)。我如何使用JavaScript触发按钮的点击事件时，进入键按下文本框内?
在我的当前页面上已经有一个不同的提交按钮，所以我不能简单地将该按钮设置为提交按钮。并且，我只想让Enter键单击这个特定的按钮，如果它是从这个文本框中按下，没有其他。
<input type="text" id="txtSearch" />
<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();
}
});
其他回答
使用按键和事件。键=== "进入"与现代JS!
const textbox = document.getElementById("txtSearch");
textbox.addEventListener("keypress", function onEvent(event) {
if (event.key === "Enter") {
document.getElementById("btnSearch").click();
}
});
Mozilla文档
支持的浏览器
这也可能有帮助，一个小的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)" />
我知道这个问题已经解决了，但我刚刚发现了一些东西，可以对其他人有所帮助。
由于还没有人使用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，以允许这段代码(大概)也可以在表单中工作。(我将对此进行测试，然后删除括号中的内容。)
在现代，undeprecated(没有keyCode或onkeydown) Javascript:
<input onkeypress="if(event.key == 'Enter') {console.log('Test')}">
我已经通过添加类开发了自定义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 + 输入
