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


Trigger a button click with JavaScript on the Enter key in a text box

我有一个文本输入和一个按钮(见下文)。当在文本框中按下enter键时，如何使用javascript触发按钮的单击事件？

当前页面上已经有一个不同的提交按钮，因此我不能简单地将该按钮设置为提交按钮。而且，我只想让enterabkbbkbd键单击这个特定的按钮，如果它是从这个文本框中按下的，其他什么都没有。

1
2
<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
相关讨论

在jquery中，以下内容可以工作：

1
2
3
4
5
$("#id_of_textbox").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#id_of_button").click();
    }
});

1
2
3
4
5
6
7
8
9
$("#pw").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#myButton").click();
    }
});

$("#myButton").click(function() {
  alert("Button code executed.");
});
1
2
3
4
5
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

Username:<input id="username" type="text">
Password:&nbsp;<input id="pw" type="password">
<button id="myButton">Submit</button>

或者在普通的javascript中，以下内容可以工作：

1
2
3
4
5
6
7
document.getElementById("id_of_textbox")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("id_of_button").click();
    }
});

1
2
3
4
5
6
7
8
9
10
11
12
document.getElementById("pw")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("myButton").click();
    }
});

function buttonCode()
{
  alert("Button code executed.");
}
1
2
3
4
5
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

Username:<input id="username" type="text">
Password:&nbsp;<input id="pw" type="password">
<button id="myButton" onclick="buttonCode()">Submit</button>

相关讨论

那就编码吧！

1
2
3
4
5
6
7
8
9
10
11
<input type ="text"
       id ="txtSearch"
       onkeydown ="if (event.keyCode == 13)
                        document.getElementById('btnSearch').click()"    
/>

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

明白了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<input type="text" id="txtSearch" onkeypress="return searchKeyPress(event);" />
<input type="button" id="btnSearch" Value="Search" onclick="doSomething();" />


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;
}
相关讨论

使按钮成为提交元素，这样它将是自动的。

1
2
3
4
5
<input type ="submit"
       id ="btnSearch"
       value ="Search"
       onclick ="return doSomething();"
/>

请注意，您需要一个包含输入字段的

元素来完成这项工作(谢谢sergey ilinsky)。

重新定义标准行为并不是一个好的实践，enter键应该总是调用表单上的提交按钮。

相关讨论

由于还没有人使用过addEventListener，这里是我的版本。考虑到这些因素：

1
2
<input type ="text" id ="txt" />
<input type ="button" id ="go" />

我将使用以下内容：

1
2
3
4
5
6
7
8
var go = document.getElementById("go");
var txt = document.getElementById("txt");

txt.addEventListener("keypress", function(event) {
    event.preventDefault();
    if (event.keyCode == 13)
        go.click();
});

这允许您在保持HTML干净的同时单独更改事件类型和操作。

Note that it's probably worthwhile to make sure this is outside of a

because when I enclosed these elements in them pressing Enter submitted the form and reloaded the page. Took me a few blinks to discover.

Addendum: Thanks to a comment by @ruffin, I've added the missing event handler and a preventDefault to allow this code to (presumably) work inside a form as well. (I will get around to testing this, at which point I will remove the bracketed content.)

< /块引用>

相关讨论

在普通的javascript中，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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给出一些内容。

相关讨论

一个基本的技巧，你可以使用这一点，我没有看到充分提到。如果您想执行Ajax操作，或者在Enter上执行其他一些操作，但不想实际提交表单，可以执行以下操作：

1
2
3
4
<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>

setting action="javascript:void(0)；"这样可以从本质上防止默认行为。在这种情况下，无论您是按Enter键还是单击按钮，都会调用一个方法，并调用Ajax来加载一些数据。

相关讨论

试试看：

1
2
3
4
5
6
7
8
9
10
11
12
13
<input type="text" id="txtSearch"/>
<input type="button" id="btnSearch" Value="Search"/>

             
   window.onload = function() {
     document.getElementById('txtSearch').onkeypress = function searchKeyPress(event) {
        if (event.keyCode == 13) {
            document.getElementById('btnSearch').click();
        }
    };

    document.getElementById('btnSearch').onclick =doSomething;
}

要在每次按Enter键时触发搜索，请使用以下命令：

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

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

这是我最近的一个项目…我在网上找到了它，我不知道是否有一个更好的方法在简单的老javascript中。

尽管如此，我很确定只要表单中只有一个字段和一个提交按钮，即使页面上有其他表单，按Enter键也应该提交表单。

然后，您可以使用JS捕获表单，并执行您想要的任何验证或回调。

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

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

在这个特殊的例子中，使用yui触发已经注入了按钮功能的dom对象确实有更好的效果-但这是另一个故事…

在角2中：

1
(keyup.enter)="doSomething()"

如果您不想在按钮中看到一些视觉反馈，最好不要引用按钮，而是直接调用控制器。

此外，不需要ID——在视图和模型之间分离的另一种NG2方法。

相关讨论

没人注意到HTML属性"accesskey"，这是一段时间以来可用的。

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

accesskey_browsers

MDN上的accesskey属性快捷方式

打算这样使用。HTML属性本身就足够了，但是我们可以根据浏览器和操作系统更改占位符或其他指示器。这个脚本是一个未经测试的草稿方法来给出一个想法。你可能想使用浏览器库检测器，比如微型bowser。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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...'}
1
<input type="text" id="guestInput" accesskey="z" placeholder="Acces shortcut:"></input>

相关讨论

在这种情况下，您还需要禁用从发布到服务器的Enter按钮并执行JS脚本。

1
2
3
<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();" />

这种onchange尝试已经很接近了，但是在浏览器的前后(在Safari 4.0.5和Firefox 3.6.3上)方面表现不好，所以最终我不会推荐它。

1
2
<input type="text" id="txtSearch" onchange="doSomething();" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
相关讨论

在现代JS中使用keypress和event.key ==="Enter"！

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

Mozilla文档

支持的浏览器

1
event.returnValue = false

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

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

对于jquery mobile，我必须这么做

1
2
3
4
5
$('#id_of_textbox').live("keyup", function(event) {
    if(event.keyCode == '13'){
    $('#id_of_button').click();
    }
});
相关讨论

为了添加一个完全简单的javascript解决方案来解决@icedwater在表单提交时的问题，这里有一个完整的解决方案来解决form。

NOTE: This is for"modern browsers", including IE9+. The IE8 version isn't much more complicated, and can be learned here.

小提琴：https://jsfiddle.net/rufwork/gm6h25/1/

HTML

1
2
3
4
5
6
7
<body>
    <form>
        <input type="text" id="txt" />
        <input type="button" id="go" value="Click Me!" />
       
    </form>
</body>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 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
2
3
4
5
6
7
8
9
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做这个。我试过一些建议，但有问题。这个很好用。

相关讨论

要使用jquery执行此操作，请执行以下操作：

1
2
3
4
5
$("#txtSearch").on("keyup", function (event) {
    if (event.keyCode==13) {
        $("#btnSearch").get(0).click();
    }
});

要使用普通的javascript执行此操作，请执行以下操作：

1
2
3
4
5
document.getElementById("txtSearch").addEventListener("keyup", function (event) {
    if (event.keyCode==13) {
        document.getElementById("#btnSearch").click();
    }
});

在现代，未预先准备的(没有keyCode或onkeydownjavascript:

1
<input onkeypress="if(event.key == 'Enter') {console.log('Test')}">
相关讨论

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

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

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

在jquery中，可以使用event.which==13。如果你有一个form，你可以使用$('#formid').submit()(在提交的表格中添加了正确的事件监听器)。

1
2
3
4
5
6
7
8
9
10
11
12
$('#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!");
   }
});
1
2
3
4
5
6
7
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
<label for="textfield">
Enter Text:</label>
<input id="textfield" type="text">
<button id="submit">
Submit
</button>

这也可能有帮助，一个小的javascript函数可以很好地工作：

1
2
3
4
5
6
<script type="text/javascript">
function blank(a) { if(a.value == a.defaultValue) a.value =""; }

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

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

相关讨论