输入键在按钮单击时不起作用答案

【问题标题】：Enter key is not working on button click输入键在按钮单击时不起作用
【发布时间】：2018-03-16 14:48:35
【问题描述】：

您好，我是 javascript 和编程的初学者。我刚刚使用 html、css 和 javascript 进行了现场对话。我无法访问按钮标签中的回车键。

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

【问题讨论】：

你想在这里实现什么...？
它与 enter.. 一起使用。

标签： javascript html css bootstrap-4

【解决方案1】：

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

【讨论】：

【解决方案2】：

您的函数 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>

谢谢

【讨论】：

【解决方案3】：

只有在您至少点击一次发送后，输入键才有效。并且您不应该在每次单击 Send 按钮时将新的 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 事件。

【讨论】：