looking for a script for textbox watermark

Question

I am looking for a javascript that makes the text inside the textbox to disappear once the mouse is inside the textbox and reappears on default.. it has to be a javascript...

Answer 1

Maybe something like this...

<script type=text/javascript>
  function clearGhost(id,text) {
    var obj = document.getElementById(id);
    if (obj && obj.value == text) obj.value = '';
  }

  function Ghost(id,text) {
    var obj = document.getElementById(id);
    if (obj && obj.value == '') obj.value = text;
  }
</script>

<input type=text name=myText id=myText size=20 value="Ghost Text"
    onfocus="clearGhost('myText','Ghost Text');" onblur="Ghost('myText','Ghost Text');">

This is untested... would definitely be easier with jQuery.

Answer 2

Newer browsers do this without JavaScript with the placeholderattribute: http://dev.w3.org/html5/spec-author-view/common-input-element-attributes.html#the-placeholder-attribute

Answer 3

You have similar question posted and answered here:

http://stackoverflow.com/questions/108207/how-do-i-make-an-html-text-box-show-a-hint-when-empty

cheers

Answer 4

    <input type="text" value="mm/dd/yyyy" id="date1"/>

    <script type="text/javascript">

        (function(){

            function showHideDefaultText(elem){

                var defaultValue = elem.defaultValue;

                var showDefaultText = function(){ 
                    if(this.value.length === 0){
                        this.value = defaultValue;
                    }
                }

                var hideDefaultText = function(){ 
                    if(this.value===defaultValue){  
                        this.value = "";
                    }
                }

                elem.onfocus = hideDefaultText;
                elem.onblur = showDefaultText;

            }

            var d1 = document.getElementById("date1");
            showHideDefaultText(d1);

        })()

    </script>