Question

我有一个用户输入的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 = "";
  }
}

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

类型＆＃34; abcd＆＃34;在输入框中
命中空间

我现在必须点击一个退格键才能看到那里的entry.placeholder文本。每当空格或输入键被击中时，如何使其不包括该空格？

这也很烦人，因为我现在必须使用entry.value.trim()删除起始空格。

Answer 1

抓住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">

Answer 2

空间存在，因为在调用事件侦听器之前，角色不会被添加到输入的值中。如果您要取消该活动，则该角色不会被添加。

event.preventDefault();

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

输入字段始终提示输入而不是显示占位符文本

2 个答案: