Onclick attribute manipulation in javascript?

Question

I have an input field with some pre defined text explaining what it is for. If the user clicks it should get blank so the user can write his/her own. But this should not happen if the user already entered custom text and for some reason clicks the field again.

The first part works, the second doesn't. How do I need to adjust this code?

 <input type="text" value="Write something..." firstclick=true
 onclick="if(this.getAttribute('firstclick')) {
 this.value='';this.setAttribute('firstclick',false);} ;"/>

This is the programmatic equivalent to re-inventing the wheel. It's called a watermark textbox and there are a million available for you to use/learn from. — Jamiec
– Jamiec, Commented Aug 19, 2011 at 8:34
There's also HTML5's placeholder attribute, which takes care of it automagically. In compatible browsers, that is. For other browsers, see Jamiec's comment — Flambino
– Flambino, Commented Aug 19, 2011 at 8:46

Jonas G. Drange · Accepted Answer · 2011-08-19 08:37:04Z

2

<input type="text" value="Write something..." 
onfocus="if(this.value=='Write something...'){ this.value='';}" 
onblur="if(this.value==''){this.value='Write something...';}">

Use onfocus and onblur instead :)

answered Aug 19, 2011 at 8:37

Jonas G. Drange

8,8332 gold badges29 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kristoffer Sall-Storgaard · Accepted Answer · 2011-08-19 08:42:29Z

You probably want onfocus instead, take a look at this sample:

<input type="text" value="Name"
    onfocus="if(this.value === 'Name'){this.value = ''}" 
    onblur="if(this.value === ''){ this.value = 'Name'}" >

If the current value on focus has the value "Name", set the value to nothing

If the current value on blur has no value, set it to "Name"

A better way to do it would be to make the autoclear a function so you dont have to retype it every time:

function autoClearField(domElement)
{
    var defaultValue = domElement.value;
    domElement.onfocus = function()
    {
        if(this.value === defaultValue)
        {
            this.value = '';
        }
    }

    domElement.onblur = function()
    {
        if(this.value === '')
        { 
            this.value = defaultValue;
        }
    }
}

And for HTML you use:

<input id='name' type="text" value="Name" >

Calling the function like this sets up autoclear:

autoClearField(document.getElementById('name'));

A working jsFiddle

alexnormand · Accepted Answer · 2011-08-19 09:14:45Z

As mentioned you should use the html5 placeholder attribute with browsers that support it.

<input type="text" id="name" />

<script>
function addPlaceHolder(elt, defaultText) {
    if("placeholder" in document.createElement("input"))
        elt.placeholder = defaultText;
    else 
    {
        var defaultValue = defaultText;
        elt.value = defaultText;
        elt.onfocus = function()
        {
            if(this.value === defaultValue)
            {
                this.value = '';
            }       
        }
        elt.onblur = function()
        {
            if(this.value === '')
            { 
                this.value = defaultValue;
            }
        }
    }
}
addPlaceHolder(document.getElementById('name'), 'defaultText');
</script>

Grzegorz Rożniecki · Accepted Answer · 2011-08-19 08:39:22Z

1

You have problem with casting string "true" and "false" to bool.

Watch this fiddle. Apparently in JS:

Boolean("false");  // == true
!! "false";        // == true

answered Aug 19, 2011 at 8:39

Grzegorz Rożniecki

28.1k11 gold badges95 silver badges116 bronze badges

Comments

The Surrican · Accepted Answer · 2011-08-19 09:54:37Z

1

well i did it like this:

firstclick='1' value="Antwort verfassen..." 
onfocus="if(this.getAttribute('firstclick')) {
    this.value='';this.removeAttribute('firstclick');
};"

answered Aug 19, 2011 at 9:54

The Surrican

30k24 gold badges127 silver badges168 bronze badges

Collectives™ on Stack Overflow

Onclick attribute manipulation in javascript?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related