Make text inside a textfield display when the page loads and disapear when clicked

roryt 0 492 Views

Use

This script can be used to mimize space of a textfield by putting the title of the field inside the text field itself when the page loads. This title will then disapear when it is clicked.

How To Use

Use the following code as your textfield and fill in the "value" property with the text that you want appear inside the field.

I hope you can use this handy code somewhere

<input onfocus="this.value=''" name="Search" type="text" value="Search"/>

Dani AI

Generated

Modern, simple solution: use the HTML5 placeholder attribute — it shows hint text when the page loads and disappears as soon as the user focuses/starts typing, so you usually don’t need the fragile onfocus/onblur hacks in the thread. (developer.mozilla.org)

The accessible pattern is to keep a proper <label> for every field and use placeholder only as a short hint (not a replacement for the label). This avoids the edge cases , , and were patching (clearing values, restoring them, or tracking a “been changed” flag). See WebAIM and MDN on why placeholders must not replace visible labels. (webaim.org)

Example (minimal, accessible):

<label for="q">Search</label>
<input id="q" name="q" type="search" placeholder="Search">

If you must support very old browsers, feature-detect placeholder and load a tiny polyfill or apply a safe fallback that only uses a visual hint (don’t overwrite real user input). Example check: 

if (!('placeholder' in document.createElement('input'))) {
  // load polyfill or add safe focus/blur fallback
}

Placeholder is well supported in modern browsers, but legacy browsers may need that fallback. (caniuse.com) For non-semantic/custom controls (e.g., contenteditable) use aria-placeholder or proper ARIA labeling so assistive tech gets the hint without breaking semantics. (developer.mozilla.org)

Quick best-practice recap: use placeholder for hints, always provide a real label (visually hidden if needed), test with keyboard and a screen reader, and avoid using background images for text hints (as suggested) because they’re not accessible or translatable. Thanks to and for the constructive thread examples — the HTML5 approach keeps the behavior simple and robust.

Member Avatar for ~s.o.s~
~s.o.s~ 2,560 Failure as a human

But this code won't work if the text field loses focus and then gains it again and for a variety of other conditions. With a bit of tweaking you guys should get the desired result. Here is my stab at it...:

<html>
<head>
    <title>Cool Text Effect</title>
</head>
<body>
    <label>Click on this text box </label>
    <input type="text" name="txt" value="Search" 
        onfocus="if(this.value == 'Search') { this.value = ''} " 
            onblur="if(this.value == '') { this.value='Search'; }" />
</body>
</html>
Member Avatar for MattEvans
MattEvans 473 Veteran Poster

ah... but what if nothing and Search are valid values? ;)

<input type="text" name="txt" value="Search" 
        onfocus="if(this.beenchanged!=true){ this.value = ''}" 
            onblur="if(this.beenchanged!=true) { this.value='Search' }"
               onchange="this.beenchanged = true;"/>
Member Avatar for tavox
tavox 0 Newbie Poster

Nice job, the original code i already know but the comments posted are very helpful.

Member Avatar for almostbob
almostbob 866 Retired: passive income ROCKS 
<html>
<head>
<title>Text Effect</title>
</head>
<body>
<input style='background:url("search.jpg")' type="text" name="txt" value="" 
  onfocus='this.style.background="none";' 
  onblur="if(this.value == '') { this.style.background="url('search.jpg')"; }" />
</body>
</html>

where search.jpg is an image of the word 'Search'

Member Avatar for ServletEst
ServletEst 0 Newbie Poster

this was really helpful, thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Edit Preview