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 ?

It's working fine for me. Can you set up a snippet demonstrating the problem, or maybe a JS Fiddle? — KevBot
– KevBot, Commented Jun 10, 2017 at 2:14
@CBroe Thx a lot, it does work ! This is what I used first but for probably another reason it wasn’t working, so I then I came with setAttribute… Anyway I’m still upset that setAtttibute('value','nonemptystring') works but not setAtttibute('value','') doesn’t (?!) I expected e.setAttribute('value',foo) to be the exact equivalent of e.value = foo and it appears it is not the case when foo = ''. Weird. — Stéphane
– Stéphane, Commented Jun 10, 2017 at 2:18
@KevBot This is part of some other code and I can’t easily do it (modal content…) but you’re right. I may try to write a code that demonstrates this behavior…if I’m told e.value = foo et e.setAttribute('value',foo) are supposed to be equivalent in any case I probably spotted a bug :\ — Stéphane
– Stéphane, Commented Jun 10, 2017 at 2:23

aquarium · Accepted Answer · 2017-06-10 02:30:11Z

6

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

answered Jun 10, 2017 at 2:30

aquarium

8510 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Stéphane Over a year ago

Yes thx @aquarium pain… As I answered to the other comments it works like this… I still don’t know why it doesn’t work with setAttribute. But I cannot manage to reproduce it in a snippet so… nevermind

aquarium Over a year ago

@Stéphane by snippet do you mean like JSFiddle, if yes, jsfiddle.net/b8dvy7uy

Stéphane Over a year ago

I mean I still have the bug in my application but I cannot manage to write a simple example to reproduce it. With simple code like the example you gave, or other things I tried, yes, it works. Anyway, I have no more time to investigate on this as I have now a solution to my problem.

Collectives™ on Stack Overflow

Setting an empty value for a text input

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related