按下回车键时运行 javascript 函数 - 只有 JavaScript 没有 Jquery答案

【问题标题】：Run javascript function when enter is pressed - JavaScript only no Jquery按下回车键时运行 javascript 函数 - 只有 JavaScript 没有 Jquery
【发布时间】：2016-02-18 08:50:30
【问题描述】：

您好，当我按下回车键时，我正在尝试运行一个 javascript 函数。到目前为止，这是我的代码

我的 HTML

<!DOCTYPE html>
<html>

<head>
    <title>JS Bin</title>
</head>

<body>
    <div>
        <form id="inputForm">
            <label for="userInput">Input : </label>
            <span id="userInputSpan">
                <input type="text" id="userInput" onkeydown="readInput(this)" />
            </span>
        </form>
    </div>
</body>

</html>

我的 JAVASCRIPT

function readInput(e) {
    if (e.keyCode == 13) { // 13 is enter key
        // Execute code here.
        // var temp = e.value;
        // console.log(temp);
        alert(e.value);
    }
}

这是我的JSBin

【问题讨论】：

How to detect pressing enter on keyboard using jquery?的可能重复
@KevalBhatt 不幸的是，我不允许使用 Jquery。 .如果允许我使用 Jquery，它会让生活变得更轻松:(
不允许使用jquery是什么原因？
@MorganGreen 这只是分配要求 :) 我被这个问题困住了，因此我问了 :)

标签： javascript html

【解决方案1】：

有几种方法可以做到这一点

内联事件

<input type="text" value="" onKeyDown="if(event.keyCode==13) alert('Inline Event');" size="20" id="demo1" placeholder="Inline Event">

使用 addEventListener 的不显眼的代码

<input type="text" id="demo2" value="" size="20" placeholder="Using addEventListener">

不显眼的代码调用函数

<input type="text" id="demo3" value="" onKeyUp="executeEvent(this,value)" size="20" placeholder="Seperate Handler">

将 addEventListener 附加到 DOM 元素

document.getElementById('demo2').addEventListener('keydown',function(event) {
    if (event.keyCode == 13) {
        alert('5');
    }
})

执行事件函数

function executeEvent(elem,value){
 console.log(elem)
if (event.keyCode == 13) {
        alert('You entered ' +elem.value);
    }
}

这里是JSFIDDLE

【讨论】：

【解决方案2】：

这是我使用的纯 JavaScript。希望对你有帮助。

document.onkeyup = function(e){
    if(e){
        var key = window.event ? e.keyCode : e.which;
    }else{
        var key = window.event ? event.keyCode : event.which;
    }
    if (key == '13') {
        //Code you would like to execute
    }
}

【讨论】：

仅使用var key = e.keyCode ? e.keyCode : e.which;

【解决方案3】：

您将this 传递给事件处理程序并将其用作event 对象。

将元素实例和事件对象传递给事件处理程序。

<input type="text" id="userInput" onkeydown="readInput(this, event)" />
                                                       ^^^^  ^^^^^

并将它们放入处理程序中

function readInput(el, e) {
                   ^^  ^
// el: Element
// e: Event object

Updated JSBin

window.onload = function() {
  document.getElementById("userInput").focus();
};

function readInput(el, e) {
  if (e.keyCode == 13) {
    console.log(el.value);
  }
}

<div>
  <form id="inputForm">
    <label for="userInput">Input :</label>
    <span id="userInputSpan">
      <input type="text" id="userInput" onkeydown="readInput(this, event)"/>
    </span>
  </form>
</div>

建议：

使用 DOMContentLoaded 事件而不是使用 onload。
使用addEventListener绑定事件
要设置页面加载的焦点，请在输入中使用autofocus 属性
要防止form 提交，请在事件处理程序中使用return false; 或event.preventDefault()。

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('userInput').addEventListener('keydown', function(e) {
    if (e.keyCode == 13) {
      console.log(this.value);
      
      e.preventDefault(); // Prevent default action i.e. submit form
      // return false;
    }
  }, false);
});

<div>
  <form id="inputForm">
    <label for="userInput">Input :</label>
    <span id="userInputSpan">
      <input type="text" id="userInput" autofocus />
    </span>
  </form>
</div>

【讨论】：

完美，我猜 e 代表事件而 el 代表元素？ :)
@gkmohit 是的...您可以使用 e.keyCode 检查密钥代码并使用 el 对元素进行任何操作。
@gkmohit 我已经添加了el 和e 的描述。

【解决方案4】：

相反，我建议不要在 HTML 中嵌入 JavaScript。

document.addEventListener('keydown', function(e) {
  if ( e.keyCode == 13 ) {
    var ele = document.getElementById('userInput');
    alert(ele.value);
  }
});

<form id="inputForm" >
  <label for="userInput">datt1939 : </label>
  <span id="userInputSpan">
    <input type="text" id="userInput">
  </span>
</form>

由于 StackOverflow 沙盒会阻止 alert 触发，因此这里是 JSFiddle。

【讨论】：

我喜欢这种方法，但它似乎不起作用：/
@gkmohit 它确实有效。 StackOverflow 阻止 alert 触发，可能是出于安全考虑。
你认为你可以添加 jsfiddle 吗？ :) 它会更容易：o
@gkmohit 如果将脚本包含在<head> 中将不起作用，请使用DOMContentLoaded 或将脚本移动到<body> 的末尾。
我明白你现在做了什么:)，但是如果我在按下回车键时不想要响应怎么办？ :) 这就是你的回答有点离题的地方:)