Clearing the textbox values onclick and displaying onblur

Question

Is there a way to clear the default textbox value onclick on textbox and display onblur of multiple textboxes on form page?

Have you tried anything? Do you want a placeholder-like behaviour? Is it a `textbox` or an `input`? What should be clicked? The textbox itself? Should it always be cleared? Or only under certain conditions? — Zeta, Mar 11 '13 at 10:30
Yes I want a placeholder kind of behaviour on multiple text boxes on a form page — Aayush Aarwal, Mar 11 '13 at 10:33
You can use the HTML5 placeholder tag `` - is that want you want? (http://jsfiddle.net/fnkr/69pt9/)[Preview here] — fnkr, Mar 11 '13 at 10:34
@sahilagarwal: Again, `textbox` or `input`? Show some effort, include at least a little bit of your HTML in your question and what you have tried. — Zeta, Mar 11 '13 at 10:34
Possible duplicate of http://stackoverflow.com/questions/5522164/input-placeholders-for-internet-explorer — fnkr, Mar 11 '13 at 10:36

score 8 · Answer 1 · answered Mar 11 '13 at 12:45

HTML:

<input type="text" value="" onClick="Clear();" id="textbox1>
<input type="text" value="" onClick="Clear();" id="textbox2>
<input type="text" value="" onClick="Clear();" id="textbox3>
<input type="text" value="" onClick="Clear();" id="textbox4>

Javascript :

function Clear()
{    
   document.getElementById("textbox1").value= "";
   document.getElementById("textbox2").value= "";
   document.getElementById("textbox3").value= "";
   document.getElementById("textbox4").value= "";
}

Your question was a little vague to me, but the above will clear all the textboxes when one is clicked. Hopefully this helps you.

DRY `function Clear(obj){obj.value=''}` and call ` – Bellash Dec 04 '14 at 10:49 — Bellash, Dec 04 '14 at 10:49

Bellash · Answer 2 · 2014-12-30T12:54:30.680

5

One Line solution

  <input type="text" value="" onClick="this.value='';" id="textbox1">

or

 <input type="text" value="" onClick="this.value=='Initial Text'?this.value='':this.value;" id="textbox1">

edited Dec 30 '14 at 12:54

answered Dec 04 '14 at 10:47

Bellash

7,560
6
53
86

This will clear it every time, not just the default value. You probably need a flag to indicate that whether it's the first time or not. – fejese Dec 04 '14 at 11:18
2

`` – Bellash Dec 30 '14 at 12:53

score 3 · Accepted Answer · answered Apr 25 '16 at 05:03

function Clear1(str)
{    
   document.getElementById(str).value= "";
}

function Clear2(str2)
{    
var aa1=document.getElementById(str2);
 if (aa1.value==""){  
    document.getElementById(str2).style.backgroundColor = "#ffcccc"; 
 }else{
    document.getElementById(str2).style.backgroundColor = "#ffffff";   
  }
}

<input type="text" value="test1" onClick="Clear1(this.id);" id="textbox1" onblur="Clear2(this.id);">
<input type="text" value="test2" onClick="Clear1(this.id);" id="textbox2" onblur="Clear2(this.id);">
<input type="text" value="test3" onClick="Clear1(this.id);" id="textbox3" onblur="Clear2(this.id);">
<input type="text" value="test4" onClick="Clear1(this.id);" id="textbox4" onblur="Clear2(this.id);">

https://jsfiddle.net/warunamanjula/qy0hvmyq/1/

Clearing the textbox values onclick and displaying onblur

3 Answers3

Linked