Setting an empty value for a text input

Question

I have the following JS :

document.getElementById('sketchpad-post').setAttribute('value','')

The HTML input is as follow:

<input type="text" id="sketchpad-post" autocomplete="off" value="" placeholder="Message"/>

If the second argument of the setAttribute function is an empty string, like in the example above, it doesn’t work : it doesn’t empty the text field (the text field has a previously set value).

Now if the second argument is a non-empty string, then, it works : it sets my text field to the provided value.

I find this behavior particulary strange…

I tried to enforce autocomplete="off" (and even autocomplete="flu") doing a setAttribute and also to do a removeAttribute('value') but I still cannot manage to have this field blank when the user display it.

As a workaround I can set the value to a kind of placeholder like '…' or whatever other character (an non-breakable space maybe?) but it’s not very nice.

I have this behavior in both latest Chrome (Chromium) and Firefox.

Any idea ?

Answer 1

document.getElementById('sketchpad-post').value = "";