javascript function return to a form input element not working

I have a form input like so:

<input type="text" name="footer_contact_name" class="footer_contact_input" onfocus="this.value='';" onblur="return inp_cl(this);" value="Name" />

I have made a js function:

functi开发者_如何学JAVAon inp_cl(input){
    if(input.value==''){
        return 'Name';
    }
}

The problem is that the form input value wont change to "Name" onBlur!

Any ideas whats wrong here?

Or maybe you all have better suggestions to how to make the code as short as possible, or maybe even a whole different approach to this? All I want is the text "Name" to be the default value, then dissappear onFocus, and if nothing entered, reappear again.

Thanks

You need to change return 'Name'; to input.value = 'Name';

There's a few solutions to this:

Solution 1

A return in your onblur isn't what you want with the function the way you've written it. Without changing your function, you can change your onblur to make use of the return value of your function using this:

onblur="this.value=inp_cl(this);"

or you can fix your function to update the input contents directly:

function inp_cl(input) {
    if (input.value == '') {
        input.value = 'Name';
    }
}

and change your onblur attribute to:

onblur="inp_cl(this);"

The issue with your onfocus is that it's going to wipe out the content of your input box regardless of what's in there, so if you've got it populated and you leave and come back to this field, it's going to be wiped out, so you need the reverse of your function and point your onfocus to that:

onfocus="inp_bl(input)"

<script type="text/javascript">

function inp_bl (input) {
    if (input.value == 'Name') {
        input.value = '';
    }
}

</script>

Solution 2

Alternatively you can hook it up in javascript removing the need for your onfocus/onblur attributes in your markup - this script will hook the watermark onto the required inputs events directly:

<script type="text/javascript">

watermark = function(input, watermarkText) {
    input.onfocus = function () {
        if (this.value == watermarkText)
            this.value == '';
    }
    input.onblur = function () {
        if (this.value == '')
            this.value == watermarkText;
    }
}

new watermark(document.getElementById("txtName"), "Name");
new watermark(document.getElementById("txtAddress"), "Street Address");
new watermark(document.getElementById("txtPostalCode"), "Postal Code");

</script>

<input type="text" id="txtName" />
<input type="text" id="txtAddress" />
<input type="text" id="txtPostalCode" />

Now you can scrap your onfocus/onblur attributes in your markup... and you've got repeatable code meaning you don't have to contaminate your markup with onfocus/onblur functionality.

Solution 3

By far the simplest way I can think of though, is to use jQuery and the watermark plugin - if you're already using jQuery, then it's no big deal, but if you're not, it adds a bunch of overhead you may not want. jQuery is pretty lightweight, but it comes with a bit of a learning curve as the set based paradigm it uses isn't quite what imperative programmers are used to:

$(document).ready(function() {

    //This is the important bit...
    $("#id_of_your_input_control").watermark("String to use as watermark");

});

Then scrap your onfocus/onblur attributes as the watermark function will hook it all up for you.

For this kind of functionality, jQuery makes things much more expressive - if you're not familiar with it, it's definitely worthwhile looking up and getting familiar with.

Addendum

The nice thing about Solution 3 is that it handles things like styling of your text when the watermark is displayed so that it looks like a watermark, meaning you don't have to handle all that yourself. It also attaches to the onblur/onfocus properly. If you go with Solution 2, it's a naive solution - if you want multiple handlers for the onblur and/or onfocus then that method doesn't attach properly and all other handlers for those events will be replaced with these - so it's not technically a safe approach, though in 99.9% of cases, it will work just fine.

try dis dude its help u!!

<input type="Text" value="Name" onblur="if(this.value=='') this.value=this.defaultValue; " 
                onfocus="if(this.value==this.defaultValue) this.value=''; ">