无法在按键事件上打印输入字段的值答案

【问题标题】：Unable to print value of input field on keypress event无法在按键事件上打印输入字段的值
【发布时间】：2019-02-02 04:50:14
【问题描述】：

我是 javascript 的新手，并且编写了一个简单的程序，在该程序中单击鼠标并按 Enter 键，输入字段的值将打印在有序列表中。我可以使用按钮单击事件打印值，但无法使用按键（输入键）打印它。

这是我得到的错误：

[Violation] 'keypress' 处理程序耗时 886 毫秒

JavaScript：

let button=document.getElementById("enter");
let input=document.getElementById("ip");
let ol=document.getElementById("oList")

//variable button binds addEventListener method to a click event
//listening to click event and performning action onclick
button.addEventListener("click",function() {
    //if input's length is greater than 0 then create li, append the input to li and then append li with orderd list else will print nothing to add
    if(input.value.length>0) {
    //created a list tag to add results after user submits
        console.log(input.value);
        let li=document.createElement("li");
        //will append the newly create li with same text "testing"
        //createTextNode creates text
        li.appendChild(document.createTextNode(input.value));
        //the text will be added to the ordered list 
        ol.appendChild(li);
        //reason for input.value=""; is that it will reset the input field after submitting the value
        //if this is not given then input field won't be resetted everytime on input submit
        input.value="";
    }
    else {
        alert("nothing to add")
    }  
})

input.addEventListener("keypress", function(event) {
    if(input.value.length>0 && event.keycode==13) {
        let li=document.createElement("li");

        li.appendChild(document.createTextNode(input.value));

        ol.appendChild(li);

        input.value="";
    }
    else {
        alert("nothing to enter");
    }

})

HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Shopping list</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
      <div class="list" id="1">
            <h1 id="2" >Shopping List</h1>
            <h2 id="3">Items:</h2>
            <input type="text" id="ip">
            <button type="button" class="btn btn-primary" id="enter">Add</button>
            <ol id="oList">
              <li>a</li>
            </ol>


      </div>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="shoppingList.js"></script>
  </body>
</html>

【问题讨论】：

请用相关的HTML更新问题......
那么您是希望通过keypress 事件预览正在键入的内容，还是希望使用它来启用/禁用回车按钮？
我希望按下回车键时将结果打印在其下方
那么为什么不将input 和button/submit 放在form 中并删除表单默认提交行为呢？
@SmitSanghvi 也许这个JsFiddle Demo 会有所帮助？

标签： javascript html dom enter

【解决方案1】：

keypress 事件已被弃用。您可能想使用 beforeinput 或 keydown 代替。

有关更多信息，请参阅此页面：https://developer.mozilla.org/en-US/docs/Web/Events/keypress

如果使用 beforeinput 或 keydown 未能解决问题，请分享您的 html，以便我们进一步提供帮助。

【讨论】：