How to implement placeholder text on input elements using jQuery?

Question

how can i implement a jquery hint text on inputs?

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

thanks :))

Answer 1

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.

Answer 2

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');
    });

}

Answer 3

“ jquery提示文本 ”的第一个Google结果是这个插件 ，它看起来像你想要的。

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

Answer 4

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();
     }
 });

Answer 5

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/

Answer 6

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">

Answer 7

jquery 自动完成怎么样？

Answer 8

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.