Question

I want to use the placeholder attribute for HTML input[type=text] elements such that the placeholder text disappears ‘after’ the user starts typing as opposed to ‘onfocus’. Something like the sign-in page on pivotal tracker: https://www.pivotaltracker.com/signin

So far I’ve not used the placeholder attribute. Instead I used a ‘onkeyup’ event on the input field such that it empties the contents of the input field as soon as the user types the first character. To do this I’ve setup a custom attribute on the input element called ‘data-received’ which is false by default and is set to true as soon as the user types the first character. (So that it doesnt continue to empty the field). I can do something similar by ‘unbinding’ the ‘keyup’ method on the input field.

I m not so happy with this method and I was wondering if there s a better way to do this?

Answer 1

Ok I figured this out. I took some cues from the zendesk site as well. Firstly a placeholder attribute is not used. A label is used along with the input field with position: absolute. Its position to overlap the input field associated with it. Javascript is used to track the onkeyup event and as soon as it sees that the value of the input field is not empty, it simply hides the associated label. If you delete whatever your typed, it shows the label again 🙂