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

Question

I have an input box that a user types into:

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

And in this entry box everything they type will get stored in a variable, but then cleared when they hit space or enter.

var entry = document.getElementById("entry");

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

The problem is when they enter in something new in the entry box, the entry box is already a space in before they type. So if I execute:

1. Type "abcd" in entry box
2. Hit space

I would then have to hit a backspace now to see the entry.placeholder text that is there. How do I make it not include that space whenever a space or enter key is hit?

It is also quite annoying because I have to currently use the entry.value.trim() to remove the beginning space.

Answer 1

Catch keyup instead of keypress , then make sure you cancel the processing of the keystroke, so it's not added to the empty value after your handler completes.

 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

The space is there because the character doesn't get added to the input's value until after your event listener is called. If you were to cancel the event the character won't get added.

event.preventDefault();

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