如何防止我的keyUp事件侦听器多次触发

Question

好的，在问这个问题之前，我确定已经对此有一个关于stackoverflow的答案...但是我找不到任何东西，所以去了：

我正在使用flask创建一个网站。其中的一部分是发表评论。

当我单击Enter时，它应该提交表单以向数据库添加评论。

这是我的代码：

（这是表格）

<form method="POST">
    {{ form.hidden_tag() }}
    {% if form.comment.errors %}
        {{ form.comment(id="comment-input", class="new-comment", placeholder="Add a new comment", autofocus="autofocus") }}
        <div class="invalid-feedback" style="display: block;">
            {% for error in form.comment.errors %}
                <span>{{ error }}</span>
            {% endfor %}
        </div>
    {% else %}
        {{ form.comment(id="comment-input", class="new-comment", placeholder="Add a new comment", autofocus="autofocus") }}
    {% endif %}
    {{ form.submit(class="btn btn-outline-info", id="submit", style="display:none;") }}
</form>

当按下回车键时，我正在使用此javascript提交表单：

var input = document.getElementById("comment-input");
input.addEventListener("keyup", function(event) {
  // Cancel the default action, if needed
  event.preventDefault();
  // Number 13 is the "Enter" key on the keyboard
  if (event.keyCode === 13) {
    // Trigger the button element with a click
    document.getElementById("submit").click()
  }
});

问题是，通常，如果我在输入评论后按Enter键，效果很好，但是如果我在输入评论后按住Enter键，则会提交多个评论。

但是，如果您查看我的代码，它会显示keyUp而不是keyDown！我很确定当您按住某个键时，它仍然只有keyUp一次。

我已经检查了stackoverflow等大约2个小时，希望这个问题对我有帮助。

Answer 1

very-long-permanent-id-with-the-value-...在JavaScript中不是有效事件。您必须获取正确的大小写才能手动触发事件。在事件监听器中将keyUp更改为keyUp，它应该可以正常工作。

通过阻止该事件来停止提交表单：

keyup