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);} ;"/>

Answer 1

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

Answer 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 :)

Answer 3

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>

Answer 4

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

Watch this fiddle . Apparently in JS:

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

Answer 5

well i did it like this:

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