How to implement placeholder text on input elements using jQuery?

how can i implement a jquery开发者_如何转开发 hint text on inputs?

<input class="question_box" title="hint text">

thanks :))

HTML5 introduces the placeholder attribute on text boxes. Read here: http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-placeholder

Live demo: http://jsfiddle.net/simevidas/8mTLY/

This currently works in Chrome, Safari and Opera.
Firefox 4 should add support for this (confirmation please).
Unfortunately, it seems that IE9 did not implement this.

The first Google result for "jquery hint text" is this plugin, which looks like what you want.

$('.question_box').hint();

EDIT : ok I didn't understand "hint text", sorry.

$(function() {
    $('.question_box').focus(function() {
        if ($(this).val() == 'Blablabla')
            $(this).val('');
    });

    $('.question_box').blur(function() {
        if($(this).val() == '')
            $(this).val('Blablabla');
    });

}

How about jquery autocomplete?

Using jQuery 1.5.1 and jQuery UI 1.8.9, along with the tooltip code from what will be jQ UI 1.9: http://jsfiddle.net/JAAulde/XpbGh/1/

Edit: Seems that as I was posting you added info about what you wanted and this isn't quite it.

This is the function I used for my project for implementing helptext or placeholder. I hope someone will find it useful.

 $(' #chkbx_presentkort').on('change', function() {
     if($('#chkbx_presentkort').is(':checked')) {

         $('.lagerstatus #kortet_text').show().val('Skriv din text på kortet').css("color","#666");
         console.log("checked");
         $('.lagerstatus #kortet_text').focusin(function() {
             if($('.lagerstatus #kortet_text').val()== 'Skriv din text på kortet') {
             $('.lagerstatus #kortet_text').val('');
             }
         });
         $('.lagerstatus #kortet_text').focusout(function() {
             if($('.lagerstatus #kortet_text').val() == '') {
             $('.lagerstatus #kortet_text').val('Skriv din text på kortet').css("color","#666");
             }
         });
     }
     else  {
     $('.lagerstatus #kortet_text').hide();
     }
 });

There's a similar jQuery plugin named inputHints. I leverages the placeholder attribute with javascript for browser that do not support it yet.

The syntax is very similar to the earlier mentioned plugin, but this one is available on github, so everybody is free to help. I used it with succes.

http://robvolk.com/jquery-form-input-hints-plugin/

https://github.com/robvolk/jQuery.InputHints/

it seems like I'm a little late but you can simply use the attribute placeholder inside your input element. It's been added for some time now!

Here's the syntax:

<input placeholder="text">