按下 Enter 时运行 JavaScript 函数 - 只有 JavaScript 没有 Jquery

Run javascript function when enter is pressed - JavaScript only no Jquery

本文关键字：JavaScript 只有 没有 Jquery 函数 运行 按下 Enter      更新时间：2023-09-26

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

我的网页 

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

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

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

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

并将它们放入处理程序

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

更新的 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>

建议：

    使用
  1. DOMContentLoaded 事件而不是使用 onload。
  2. 使用 addEventListener 绑定事件
  3. 要将焦点设置为页面加载，请在输入上使用autofocus属性
  4. 若要阻止提交form，请使用 return false; 或 event.preventDefault() from 事件处理程序。

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>

这是我

使用的普通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
    }
}

相反，我建议不要在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。

有几种方法可以做到

内联事件

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

.JS

将 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

相关文章：