Enter鍵在單擊按鈕時不起作用

Question

嗨，我是javascript和編程的初學者。 我只是使用html，css和javascript進行了實時對話。 我無法訪問button標記中的Enter鍵。

<script>
  function typo(){
    var currentText = document.getElementById("demo").innerHTML;
    enterkey();
    var x = '<p class=chatbox>' + document.getElementById("myText").value + '</p>';
    document.getElementById("myText").value = "";
    var y = document.getElementById("demo").innerHTML = currentText + x;
  }

  function enterkey() {
    var input = document.getElementById("myText");
    input.addEventListener("keyup", function(event) {
      event.preventDefault();
      if (event.keyCode === 13) {
        document.getElementById("btn-chat").click();
      }
    });
  }
</script>

<p id="demo"></p>
<input type="text" id="myText" value="">
<button onclick="typo()" class="btn btn-warning btn-sm" id="btn-chat">Send</button>

Answer 1

您的函數enterkey（）被調用。 我在功能啟動時輸入了警報，以檢查其是否正常運行。 而且令人警覺。 也許您試圖通過enterkey（）實現的功能無法正常工作。 您需要檢查一下。

 <script> function typo(){ var currentText = document.getElementById("demo").innerHTML; enterkey(); var x = '<p class=chatbox>' + document.getElementById("myText").value + '</p>'; document.getElementById("myText").value = ""; var y = document.getElementById("demo").innerHTML = currentText + x; } function enterkey() { alert("check here"); var input = document.getElementById("myText"); input.addEventListener("keyup", function(event) { event.preventDefault(); if (event.keyCode === 13) { document.getElementById("btn-chat").click(); } }); } </script> <p id="demo"></p> <input type="text" id="myText" value=""> <button onclick="typo()" class="btn btn-warning btn-sm" id="btn-chat">Send</button> 

謝謝

Answer 2

僅在您至少單擊一次發送后，Enter鍵才起作用。 而且，每次單擊發送按鈕時，都不應將新的keyup事件綁定到文本字段。 您可以改為這樣做

 <p id="demo"></p> <input type="text" id="myText" value=""> <button onclick="typo()" class="btn btn-warning btn-sm" id="btn-chat">Send</button> <script> function typo(){ var currentText = document.getElementById("demo").innerHTML; //enterkey(); var x = '<p class=chatbox>' + document.getElementById("myText").value + '</p>'; document.getElementById("myText").value = ""; var y = document.getElementById("demo").innerHTML = currentText + x; } // function enterkey() { var input = document.getElementById("myText"); input.addEventListener("keyup", function(event) { event.preventDefault(); if (event.keyCode === 13) { document.getElementById("btn-chat").click(); } }); //} </script> 

在這里，我將腳本放置在HTML元素下面，以確保document.getElementById("myText")返回已加載的輸入，並在此之后綁定keyup事件。

Answer 3

 <p id="demo"></p> <input type="text" id="myText" value=""> <button onclick="typo()" class="btn btn-warning btn-sm" id="btn-chat">Send</button> <script> function typo(){ var currentText = document.getElementById("demo").innerHTML; var x = '<p class=chatbox>' + document.getElementById("myText").value + '</p>'; document.getElementById("myText").value = ""; var y = document.getElementById("demo").innerHTML = currentText + x; } var input = document.getElementById("myText"); input.addEventListener("keyup", function(event) { event.preventDefault(); if (event.keyCode === 13) { document.getElementById("btn-chat").click(); } }); </script>