Remove text upon selection

[Noskiw]

Just like on facebook, I would like to be able to have a random bit of text in my textbox before the user has even though about clicking on it, then when they have clicked on it, the text disappears. Yet this proves impossible to me... -.- I imagine that it uses "document.getElementById()" but again, I'm lost. Javascript is fairly new to me, I know where to use "getElementById()", but I can't make it work.

[F1Fan]

It would be best if you posted your code, but you can start with this:

 

<input type="text" value="Default Stuff" onfocus="this.value='';">

[Noskiw]

Ok, that works, i've also added an "onblur" function to it, but is there anyway to check if there is text in the box, and if so, it won't do the onblur. It would have to be in a function wouldn't it?

 

<script>

var text = document.getElementById(text);

function check(text){
    if(document.text.value){
        
    }
}

</script>
<input type="text" name="text" value="Default Stuff" onfocus="this.value='';" onblur="this.value='Default Stuff';" />

 

OK, I got stuck at the value part.... this does take a lot of thinking about... And unfortunately, I'm fairly new to javascript.

[F1Fan]

Yes it would. Try this:

<script type="text/javascript">

function checkForTextFocus(el, defaultText){

  if (el.value == defaultText){
    el.value = '';
  }

}

function checkForTextBlur(el, defaultText){

  if (el.value == ''){
    el.value = defaultText;
  }

}

</script>

<input type="text" value="Default Text" onfocus="checkForTextFocus(this, 'Default Text');" onblur="checkForTextBlur(this, 'Default Text');">

[Noskiw]

Yes it would. Try this:

<script type="text/javascript">

function checkForTextFocus(el, defaultText){

  if (el.value == defaultText){
    el.value = '';
  }

}

function checkForTextBlur(el, defaultText){

  if (el.value == ''){
    el.value = defaultText;
  }

}

</script>

<input type="text" value="Default Text" onfocus="checkForTextFocus(this, 'Default Text');" onblur="checkForTextBlur(this, 'Default Text');">

 

That works great thank you I know this is a little silly of me to ask... But I don't fully understand it, could you maybe explain? If it's a bother to explain, then you don't have to, I know you've helped me a lot, but explaining it would help me to become a better coder.

 

EDIT: Nevermind. I took a 14TH!... look at the code, and finally understood it. It took a while, but I finally got there But what I don't understand is where you got the "el" from.

 

EDIT NO. 2: "el" is just the name of the variable of the textbox I assume. I must seem like a complete dumbass to you now 

[F1Fan]

Teach a man how to fish eh?

 

Sure, I'd be happy to explain:

<script type="text/javascript">

/*
The two parameters we are passing in here are the element (el) and whatever we want as the 
default text in that text box. The element is the <input> that will be calling this function.
*/
function checkForTextFocus(el, defaultText){

  /*
  We want to check the "value" tag of the element (input) to see if it matches our default text.
  If it matches the default text, the user hasn't entered anything yet, so we want to clear it.
  So, to do this, we reassign the elements value by saying that el.value = '' which is a blank string.
  If this is not true, we do nothing, because the user has entered something.
  */
  if (el.value == defaultText){
    el.value = '';
  }

}

/*
For this function we basically do the reverse, but we still need the element and default text.
*/
function checkForTextBlur(el, defaultText){

  /*
  If the user has not entered anything, then the element's value will be blank, or ''. So we check if el.value == ''.
  If it is, then they left it blank, so we add the default text back into it. Otherwise we do nothing, because
  they have entered something, and we don't want to clear that out.
  */
  if (el.value == ''){
    el.value = defaultText;
  }

}

</script>

<!--
Now we need to add those functions to the onfocus and onblur events for the input. We add the
function name along with the two parameters we need, which are the element and the default text.
In any element, you can use the keyword "this" to refer to that particular element. So, by putting
"this" as the first function argument, that will refer to that particular element, in this case a text input.
The second parameter is just the default text (the default "value") for that particular element.
This should be the same as the "value" tag in that element, or you'll get kinda weird results.

Because these are functions, you could have as many inputs with default text specific to each one,
as in the example below.
-->
<input type="text" value="Default Text" onfocus="checkForTextFocus(this, 'Default Text');" onblur="checkForTextBlur(this, 'Default Text');">
<input type="text" value="Another Text Input" onfocus="checkForTextFocus(this, 'Another Text Input');" onblur="checkForTextBlur(this, 'Another Text Input');">
<input type="text" value="more stuff" onfocus="checkForTextFocus(this, 'more stuff');" onblur="checkForTextBlur(this, 'more stuff');">

 

Hope this helps.