Как реализовать заполнитель текста на элементах ввода с помощью jQuery?

Question

как я могу реализовать текст подсказки jquery на входах?

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

спасибо :))

Answer 1

HTML5 вводит атрибут placeholder в текстовых полях.Читайте здесь: http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-placeholder

Демонстрационная версия: http://jsfiddle.net/simevidas/8mTLY/

В настоящее время это работает в Chrome, Safari и Opera.
В Firefox 4 должна быть добавлена ​​поддержка(подтверждение, пожалуйста).
К сожалению, похоже, что IE9 не реализовал это.

Answer 2

РЕДАКТИРОВАТЬ: хорошо, я не понял "текст подсказки", извините.

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

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

}

Answer 3

Первый результат Google для " jquery hint text " - этот плагин , который выглядит так, как вы хотите.

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

Answer 4

кажется, что я немного опоздал, но вы можете просто использовать атрибут-заполнитель внутри вашего элемента ввода.Это было добавлено в течение некоторого времени!

Вот синтаксис:

<input placeholder="text">

Answer 5

Есть похожий плагин jQuery с именем inputHints. Я использую атрибут placeholder с javascript для браузера, который его еще не поддерживает.

Синтаксис очень похож на ранее упомянутый плагин, но этот доступен на github, так что каждый может помочь. Я использовал это с успехом.

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

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

Answer 6

Это функция, которую я использовал в своем проекте для реализации 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();
     }
 });

Answer 7

Использование jQuery 1.5.1 и jQuery UI 1.8.9 вместе с кодом подсказки из что будет jQ UI 1.9 : http://jsfiddle.net/JAAulde/XpbGh/1/

Изменить: Кажется, что когда я писал, вы добавили информацию о том, что вы хотели, и это не совсем так.

Answer 8

Как насчет jquery автозаполнение ?