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...

the work is nothing as such... its a simple php work and i am looking for some easy javascript.. — Sachindra, Jul 20 '10 at 14:58
The title stinks, should be edited so it is useful to people performing searches in the future. — epascarello, Jul 20 '10 at 15:09
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 — Marko, Jul 20 '10 at 14:52

score 3 · Answer 1 · answered Jul 20 '10 at 14:51

3

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

answered Jul 20 '10 at 14:51

RoToRa

37,635
12
69
105

score 2 · Accepted Answer · edited Jul 20 '10 at 14:58

2

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.

edited Jul 20 '10 at 14:58

Yacoby

54,544
15
116
120

answered Jul 20 '10 at 14:43

Fosco

38,138
7
87
101

1

you want it to go away when they CLICK right? not just mouse over... if you wanted it to go away on hover just add onmouseover="clearGhost('myText','Ghost Text');" and onmouseout="Ghost('myText','Ghost Text');" to have it come back. – Fosco Jul 20 '10 at 15:06
.. it really works buddy.. thats so simple to work on???? thanks a lot.. may be i got screwed with some ids previously... – Sachindra Jul 21 '10 at 07:13
You really like a solution that requires you to put the default text in 3 places when the browser has a property that gives you it to you. Seems like a pain to maintain. – epascarello Jul 23 '10 at 14:04

score 0 · Answer 3 · answered Jul 20 '10 at 14:59

    <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>

looking for a script for textbox watermark

3 Answers3