textbox is not validated as empty if text is entered and then deleted

Question

i have an annoying issue with watermarked text for a textbox.

what i want is if user click away of the textbox and there is no text in the textbox than the default text should appear (e.g. Search...)

i have this function to check it:

document.getElementById("searchtextbox").onblur = function() {

if (document.getElementById("searchtextbox").value == "") {
     document.getElementById("searchtextbox").setAttribute("value", "Search...");
}

it works great if i just click inside and click out. the problem comes when i click inside, enter text and delete it and then click outside.

i tried doing it with Length == 0, value == null, value.trim() == "", !value.match(/.+/) and none of them return true for this case.

in if condition use document.getElementById("searchtextbox").value="search"; — Max, Jun 07 '11 at 10:17

score 3 · Answer 1 · edited May 23 '17 at 12:12

3

Please consider using the HTML5 placeholder attribute.

<input type="text" id="searchtextbox" placeholder="Search..." value="" />

As a lot of people under my answer pointed out, Internet Explorer won't be really keen on displaying your placeholder text (what a surprise). Still, it is way more semantic to use placeholder, and do a feature detection whether the browser supports it or not.

You can do feature detection like this (from diveintohtml5.ep.io):

function supports_input_placeholder() {
  var i = document.createElement('input');
  return 'placeholder' in i;
}

If this is false, you can use your Javascript placeholder hack.

UPDATE: If you need help how to implement in a nice way, please refer to Html placeholder text in a textarea form.

I also took a look at your code and fixed it:

jsFiddle Demo

document.getElementById("searchtextbox").onblur = function() {
    if (this.value == "") {
        this.value="Search...";
    }
}

Using setAttribute is not the right way here, you do not want to set the attribute, but the live property (.value). Your if condition actually worked, but the change was not reflected.

edited May 23 '17 at 12:12

Community

1
1

answered Jun 07 '11 at 10:13

kapa

77,694
21
158
175

Not to sound snarky at all but do you really think it is a good idea to use HTML 5 with as little support that it has by browsers? – Craig Jun 07 '11 at 10:15
@naveen nor does it work for most versions of IE if it is HTML 5 – Craig Jun 07 '11 at 10:16
Hey, thanks for the reply but i need it to work with IE6 and up. – Omer Bonfil Jun 07 '11 at 10:22
@Omer Please see my edits. The best practice here is to provide the HTML5 `placeholder` attribute to browsers that support it, do a Javascript feature detection, and on failure provide a Javascript fallback solution for IE. – kapa Jun 07 '11 at 10:25
@Craig What do you mean by *little support*? Are you kidding? The newest version of every wide-spread browser has HTML5 support, including `placeholder`. How would you define *wide support* then? – kapa Jun 07 '11 at 10:31
IMO the solution you have provided is a lot of work for this feature and I do not feel there is nearly enough penetration for HTML 5 sorry. Quite surprised by the suggestion of it to be honest. Just my opinion bud! – Craig Jun 07 '11 at 10:33
@Craig Internet Explorer 6, 7 and 8 (which currently don't support it) will never support it :). Every other browser that has a significant usage percentage supports it. From your point of view, HTML5 should not be used for the next 6-7 years at least (can be more, depending on when will IE8 die). And I don't agree, it is some work ONCE to create a working `placeholder` fallback, and you can reuse it. From my experience, it is worth doing things **the right way**. Later this day I will update my answer with a bit more information. – kapa Jun 07 '11 at 11:05
We don't have to agree on this. – Craig Jun 07 '11 at 11:22
@Craig I did not say we have to :). But web development is a profession where you have to reevaluate your best practices regularly. It is evolving quite fast, and a good web developer should keep up and develop for the future as well. – kapa Jun 07 '11 at 11:25
Currently, there is no agreed upon standard for HTML 5 which is why I think it is foolish to jump on it. I think that the concept of HTML 5 standardization is great, but I simply don't think it's there yet. We don't have to agree on this. – Craig Jun 07 '11 at 11:27

score 2 · Accepted Answer · answered Jun 07 '11 at 10:16

2

As bazmegakapa suggested, consider the placeholder attribute.

To answer your question, your code isn't working because you're using setAttribute, while the user just modified the property value. Instead of using setAttribute, try using .value = 'Search...'

answered Jun 07 '11 at 10:16

Gijs

5,201
1
27
42

I love you, been working on it for the past 2 hours and didn't understand am i doing wrong. using .value = "Search.." worked perfectly! – Omer Bonfil Jun 07 '11 at 10:26

textbox is not validated as empty if text is entered and then deleted

2 Answers2