时间戳

首页 > 解决方案 > addEventListener click 在 KeyPress 之后立即消失

javascript - addEventListener click 在 KeyPress 之后立即消失

问题描述

由于某种原因，我无法让它工作，在键盘上单击输入后，新输入显示不到一毫秒然后消失

 <!DOCTYPE html>
    <html>
    <head>
        <title>Simple Register Form with JavaScript</title>
    </head>
    <body>
        <form>
            <input type="text" class="regFname" placeholder="First name: ">
            <button>Register</button>
        </form>
        <p>Current Users</p>
        <ul></ul>
    <script type="text/javascript" src="script.js"></script>
    </body>
    </html>

这是JavaScript

var inputFname = document.querySelector(".regFname");
var button = document.querySelector("button");
var ul = document.querySelector("ul");

function inputLength() {
    return inputFname.value.length;
}
function add() {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(inputFname.value));
    ul.appendChild(li);
    inputFname.value = "";
}   
function addUserAfterClick() {
    if (inputLength() > 0) {
        add();
    }
}
function addUserAfterKeyPress(event) {
    if (inputLength() > 0 && event.keyCode === 13) {
        add();
    }
}
button.addEventListener("click", addUserAfterClick);
inputFname.addEventListener("keypress", addUserAfterKeyPress);

标签： javascriptaddeventlistener

解决方案

只需添加type="button"您的html。如果未指定，则表现为type="submit"

var inputFname = document.querySelector(".regFname");
var button = document.querySelector("button");
var ul = document.querySelector("ul");

function inputLength() {
  return inputFname.value.length;
}

function addUser() {
  if (inputLength() > 0) {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(inputFname.value));
    ul.appendChild(li);
    inputFname.value = "";
  }
}
button.addEventListener("click", addUser);
<form>
  <input type="text" class="regFname" placeholder="First name: ">
  <button type="button">Register</button>
</form>
<p>Current Users</p>
<ul></ul>

推荐阅读