Question

您好我在按Enter键时尝试运行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

Answer 1

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

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

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 4

有几种方法可以做到

内联活动

<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');
    }
})

executeEvent函数

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

这是JSFIDDLE

当按下enter时运行javascript函数 - JavaScript只有Jquery

4 个答案: