CODEWITHSUNDEEP
jqueryfocus
mheavers
mheavers

Reputation: 30158

JQuery - Clearing and resetting predefined field input data on focus and blur

I haven't really found a great way to do this yet, so I figured I'd ask here - I have an text input search form field with a predefined value (Search...). When the user focuses, I'd like to clear that value out and when they blur, it should reset the text. I've been using javascript but the method I use seems like a lot of code for not much payoff, and I also have been putting the code in the element's "onclick" handler, which I'd like to avoid, by keeping everything in jquery. If anyone has any good methods, let me know. Thanks!

Upvotes: 3

Views: 8993

Answers (6)

Morgan Feeney
Morgan Feeney

Reputation: 897

As far as presentation goes the answer by mathletics is valid. However has anyone thought of the implications when this value gets submitted?

This jQuery plugin is a great solution as it deals with both presentation and the practicality of a functioning search form: https://code.google.com/p/jquery-placeholder-js/

That is unless you want people to search for the term 'placeholder', however I can't see any usability benefits there ;)

Upvotes: 0

Evan Davis
Evan Davis

Reputation: 36592

First, use the placeholder attribute for any browser that supports it.

Then, check whether the attribute is supported; if not, use this fallback:

$('input[placeholder]').focus(function(ev){ 
  var $this = $(this);
  if ($this.val() === $this.attr('placeholder')) $this.val('');
}).blur(function(ev){
  var $this = $(this);      
  if ($this.val() === '') $this.val($this.attr('placeholder'));
});

Upvotes: 6

Vikas Naranje
Vikas Naranje

Reputation: 2402

Try with

<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript">
    $(function(){
        var txt = 'Please write something';
        if($(':input#mytxtbox').val()==''){
            $(':input#mytxtbox').val(txt);
        }

        $(':input#mytxtbox').blur(function(){
            if($(this).val() == ''){
                $(this).val(txt);
            }

        }).focus(function(){
            if($(this).val() == txt){
                $(this).val('');
            }
        });
    });
</script>

<input id="mytxtbox" type="text" name="xyz" value=""/>

Upvotes: 0

Jemaclus
Jemaclus

Reputation: 2376

Two things:

1) HTML5 has a placeholder attribute that essentially does the same thing. This would work in modern browsers (FF5+, Chrome, Safari, etc), but not in IE. You can do it like this:

    <input type="text" name="title" placeholder="Enter a title here"/>

This shows some grayed out text that says "Enter a title here". When the field is focused, it removes the text, allowing the user to type.

2) You could use a simple jQuery script to do the same thing for browsers that don't support it. I recommend jQuery's Placeholder plugin (http://plugins.jquery.com/project/input-placeholder), but you can easily recreate it yourself doing something like the following:

    $('input[placeholder]').live('focus', function() {
        $(this).val('');
    });
    $('input[placeholder]').live('blur', function() {
        var placeholder = $(this).attr('placeholder');
        $(this).val(placeholder);
    });

That should work, either as-is or with slight modifications.

Good luck. :)

Upvotes: 1

John Kalberer
John Kalberer

Reputation: 5790

It sounds like you are simply using a placeholder correct? Why don't you look into a plugin like jQuery Placeholder. I am using that for a project and it works great.

Upvotes: 1

Jasper
Jasper

Reputation: 76003

//run code on document.ready event
jQuery(function ($) {
    //bind event handlers to the `focus` and `blur` events for a form input
    $('#id_of_text_input').bind('focus', function () {
        //cache this form input for speedier manipulations
        var $this = $(this);
        //if the value of this text input is the placeholder, then make it's value blank
        if ($this.val() == 'Search...') {
            $this.val('');
        }
    }).bind('blur', function () {
        var $this = $(this);
        //if the value of this text input is blank then make it the placeholder text
        if ($this.val() == '') {
            $this.val('Search...');
        }
    });
});

This will remove the placeholder if it is the only text in the input on focus and it will add the placeholder if there is no text entered in the input on blur.

Upvotes: 0

Related Questions