我有一个文本输入和一个按钮(见下文)。我如何使用JavaScript触发按钮的点击事件时,进入键按下文本框内?
在我的当前页面上已经有一个不同的提交按钮,所以我不能简单地将该按钮设置为提交按钮。并且,我只想让Enter键单击这个特定的按钮,如果它是从这个文本框中按下,没有其他。
<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
由于还没有人使用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,以允许这段代码(大概)也可以在表单中工作。(我将对此进行测试,然后删除括号中的内容。)
没有人注意到html属性“accesskey”已经有一段时间了。
这是一个没有javascript的方式来键盘快捷键的东西。
MDN上的accesskey属性快捷方式
故意这样使用的html属性本身就足够了,但是我们可以根据浏览器和操作系统改变占位符或其他指示符。该脚本是一个未经测试的草稿方法,以提供一个想法。您可能想要使用一个浏览器库检测器,比如小浏览器器
让客户知道。
linux =客户。indexOf(linux) > -1,
isWin =客户。索引(“windows”> -1,
“苹果”> -1,
isFirefox =客户索引= -1,
网络工具=客户,索引(“网络工具”)> -1,
(歌剧)> -1,
输入=文档。getElementById(“guest输入”);
如果(isFirefox) {
输入。setAttribute(“placeholder”、“ALT + SHIFT + Z”);
否则如果
输入。setAttribute (placeholder”、“ALT + Z”);
否则如果(isMac)
输入。setAttribute(“placeholder”、“CTRL + ALT + Z”);
否则
输入。setAttribute(“placeholder”、“SHIFT +逃亡- > Z”);
否则我就得操作…
<输入类型=“文本”id=“guest输入”“accesskey”placeholder=“Acces快捷方式:”></输入>
为了添加一个完全简单的JavaScript解决方案来解决@icedwater的表单提交问题,这里有一个完整的表单解决方案。
注意:这是针对“现代浏览器”,包括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 />";
}
});
}
});