按鍵事件時無法打印輸入字段的值

Question

我是javascript的新手，並編寫了一個簡單的程序，在該程序上，單擊鼠標並按Enter鍵，將在有序列表中打印輸入字段的值。 我可以使用按鈕單擊事件來打印該值，但不能使用keypress（輸入鍵）來打印它。

這是我得到的錯誤：

[違反]“按鍵”處理程序耗時886ms

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>

Answer 1

按鍵事件已被棄用。 您可能要使用beforeinput或keydown代替。

請參閱此頁面以獲取更多信息： https : //developer.mozilla.org/en-US/docs/Web/Events/keypress

如果使用beforeinput或keydown無法解決問題，請共享您的html，以便我們進一步提供幫助。

按鍵事件時無法打印輸入字段的值

問題描述

1 個解決方案

解決方案1
0 2019-02-02 04:53:55

按鍵事件時無法打印輸入字段的值

問題描述

1 個解決方案

解決方案1 0 2019-02-02 04:53:55

解決方案1
0 2019-02-02 04:53:55