How to implement placeholder text on input elements using jQuery?

Question

How to implement placeholder text on input elements using jQuery?

how can i implement jquery hint text on inputs?

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

thank:))

+3

javascript jquery text

pingpong Mar 15 '11 at 0:28

source share

8 answers

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

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

Chrome, Safari Opera.
Firefox 4 (, ).
, , IE9 .

+8

Šime Vidas 15 . '11 0:43

EDIT: ok " ", .

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

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

}

+2

GG. 15 . '11 0:36

jquery autocomplete?

0

rsplak 15 . '11 0:30

jQuery 1.5.1 jQuery UI 1.8.9, , jQ UI 1.9: http://jsfiddle.net/JAAulde/XpbGh/1/

Edit: , , , .

0

JAAulde 15 . '11 0:36

, helptext placeholder. , - .

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