输入字段总是提示输入，而不是显示占位符文本

input field always prompts for input rather than showing placeholder text

本文关键字：输入 显示 占位符 文本 字段 提示      更新时间：2023-09-26

我有一个input框，用户可以在其中键入：

<input id="entry" type="text" onkeypress="BeginTest(event)" placeholder="To start the test, begin typing here." class="focus">

在这个输入框中，他们键入的所有内容都将存储在一个变量中，但当他们进入空格或回车时会被清除。

var entry = document.getElementById("entry");
function BeginTest(event) {
  if (event.which == 32 || event.which == 13) {
    //store entry.value or do whatever
    entry.value = "";
  }
}

问题是，当他们在输入框中输入新内容时，在他们输入之前，输入框已经是一个空格。所以如果我执行：

  1. 在输入框中键入"abcd"
  2. 命中空间

然后我现在必须按下退格键才能看到那里的entry.placeholder文本。每当按下空格键或回车键时，如何使其不包括该空格？

这也很烦人，因为我目前必须使用entry.value.trim()来删除起始空间。

捕获keyup而不是keypress，然后确保取消按键处理，这样在处理程序完成后不会将其添加到空值中。

var entry = document.getElementById("entry");
function BeginTest(event) {
  if (event.which == 32 || event.which == 13) {
    entry.value = "";
    event.stopPropagation();
    event.preventDefault();
    return false;
  }
}
<input id="entry" type="text" onkeyup="BeginTest(event)" placeholder="To start the test, begin typing here." class="focus">

之所以有空格，是因为直到调用事件侦听器之后，字符才会添加到输入的值中。如果要取消该事件，则不会添加该角色。

event.preventDefault();

http://plnkr.co/edit/KDcvkXZ1dyxpNPcw8i9D?p=preview

相关文章：