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

时间：2008-09-30 21:32:10

标签： javascript button onclick onkeypress

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

我当前页面上已经有一个不同的提交按钮，所以我不能简单地将按钮设为提交按钮。并且，我只希望 Enter 键，如果从这个文本框中按下该按钮，则单击此特定按钮，没有别的。

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

31 个答案:

答案 0 :(得分：1354)

在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:&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="https://ajax.googleapis.com/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>

答案 1 :(得分：379)

然后只需编入代码！

<input type = "text"
       id = "txtSearch" 
       onkeydown = "if (event.keyCode == 13)
                        document.getElementById('btnSearch').click()"    
/>

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

答案 2 :(得分：172)

想出来：

<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 in
    e = e || window.event;
    if (e.keyCode == 13)
    {
        document.getElementById('btnSearch').click();
        return false;
    }
    return true;
}
</script>

答案 3 :(得分：79)

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

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

请注意，您需要一个包含输入字段的<form>元素才能使其工作（感谢Sergey Ilinsky）。

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

答案 4 :(得分：70)

由于还没有人使用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，以允许此代码（大概）在表单中工作。 （我将开始测试这个，此时我将删除括号内容。）

  

答案 5 :(得分：58)

在纯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来提供一些东西。

答案 6 :(得分：21)

你可以使用的一个基本技巧，我没有看到完全提到过。如果您想在Enter上执行ajax操作或其他工作，但又不想实际提交表单，则可以执行此操作：

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

设置动作=“javascript：void（0）;”这样就是防止默认行为的捷径。在这种情况下，无论您是按Enter键还是单击按钮，都会调用一个方法，并调用ajax来加载某些数据。

答案 7 :(得分：15)

试一试： 

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

答案 8 :(得分：14)

要在每次按下回车键时触发搜索，请使用：

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

答案 9 :(得分：13)

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

这只是我最近的一个项目......我在网上找到了它，我不知道在普通的JavaScript中是否有更好的方法。

答案 10 :(得分：12)

虽然，我很确定只要表单中只有一个字段和一个提交按钮，即使页面上还有其他表单，点击输入也应该提交表单。

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

答案 11 :(得分：11)

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

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

在这个特殊情况下，我确实有更好的结果使用YUI来触发已经注入了按钮功能的DOM对象 - 但这是另一个故事......

答案 12 :(得分：11)

没有人注意到html attibute＆＃34; accesskey＆＃34;这是暂时可用的。

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

accesskey_browsers

The accesskey attributes shortcuts on MDN

意图像这样使用。 html属性本身就足够了，我们可以根据浏览器和操作系统更改占位符或其他指标。该脚本是一种未经测试的划痕方法，可以提供一个想法。您可能希望使用像bowser

这样的浏览器库检测器

＆＃13;
＆＃13; 
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...'}
＆＃13; 
<input type="text" id="guestInput" accesskey="z" placeholder="Acces shortcut:"></input>
＆＃13;
＆＃13;
＆＃13;

答案 13 :(得分：11)

在 Angular2 ：

(keyup.enter)="doSomething()"

如果你不想在按钮中有一些视觉反馈，那么不引用按钮是一个很好的设计，而是直接调用控制器。

此外，不需要id - 另一种在视图和模型之间分离的NG2方式。

答案 14 :(得分：10)

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

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

Mozilla Docs

Supported Browsers

答案 15 :(得分：9)

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

答案 16 :(得分：9)

这种情况你也想要从发布到服务器禁用输入按钮并执行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();" />

答案 17 :(得分：8)

对于jquery mobile我必须做

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

答案 18 :(得分：8)

event.returnValue = false

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

至少可以在Internet Explorer和Opera中使用。

答案 19 :(得分：7)

要添加一个解决@icedwater's issue with form submission的完全简单的JavaScript解决方案，这里有一个完整的解决方案 form 。

  

注意：这适用于“现代浏览器”，包括IE9 +。 IE8版本并不复杂，可以是learned here。

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

答案 20 :(得分：5)

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中这样做。我尝试了几个建议，但有问题。这很好用。

答案 21 :(得分：5)

用jQuery做到这一点：

select resource_ , decode(appl_access,3,'F',1,'A') from (
      select r1.resource_, max (decode(r1.access_,'F',3,'D',2,'A',1,0)) 
        appl_access from res r1
      group by r1.resource_)
where appl_access in (1,3);

使用普通JavaScript执行此操作：

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

答案 22 :(得分：4)

现代，不推荐使用（无keyCode或onkeydown）的Javascript：

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

答案 23 :(得分：4)

对于不推荐使用现代JS keyCode，请改用key 

searchInput.onkeyup = function (e) {
    if (e.key === 'Enter') {
        searchBtn.click();
    }
}

答案 24 :(得分：3)

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

setup.py

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

答案 25 :(得分：2)

短版纯JS 

txtSearch.onkeydown= e => (e.key=="Enter") ? btnSearch.click() : 1


txtSearch.onkeydown= e => (e.key=="Enter") ? btnSearch.click() : 1

function doSomething() {
  console.log('?');
}
<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

答案 26 :(得分：1)

今天change事件就是这样！

document.getElementById("txtSearch").addEventListener('change',
    () => document.getElementById("btnSearch").click()
);

答案 27 :(得分：0)

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

答案 28 :(得分：0)

我已经开发了定制的javascript，只需添加类即可实现此功能

示例：<button type="button" class="ctrl-p">Custom Print</button>

在这里查看Fiddle
-或-
查看运行示例 https://stackoverflow.com/a/58010042/6631280

  

注意：在当前逻辑上，您需要按 Ctrl +   输入

答案 29 :(得分：0)

您的要求可以通过w3schools的链接来回答：https://www.w3schools.com/howto/howto_js_trigger_button_enter.asp。在下面看看。

var doSomething = document.getElementById("doSomething")
input.addEventListener("keyup", function(event) {
  // Number 13 is the "Enter" key on the keyboard
  if (event.keyCode === 13) {
    // Cancel the default action, if needed
    event.preventDefault();
    document.getElementById("myBtn").click();
  }
 });

答案 30 :(得分：-4)

这也可能有所帮助，一个小的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)" />

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

相关问题
最新问题