очистить значение по умолчанию

Question

Я нашел много примеров, но я пытаюсь найти самый простой способ очистить значение ввода по умолчанию при нажатии на него.

Это для поля поиска.У меня есть «Поиск по сообщению», и я хочу очистить его, нажимая на него.

Я пытался использовать jquery, но по какой-то причине это не работает.более простого кода?

Answer 1

Было бы интересно попробовать это с атрибутом html5 placeholder. Это будет работать на всех текущих версиях Safari, Chrome и Firefox.

<input type="text" name="s" id="search" placeholder="Search for post"/>

Затем вам нужно добавить запасной код для браузеров, которые не поддерживают эту функцию.

$(function() {
    $(':input[placeholder]').each(function() {
        var me = $(this);
        me.val(me.attr('placeholder'))
            .focus(function() {
                var that = $(this);
                if (that.val() == that.attr('placeholder')) {
                    that.val('');
                }
            }).blur(function() {
                var that = $(this);
                if (that.val().trim().length == 0) {
                    that.val(that.attr('placeholder'));
                }
            });
    });
});

Я собрал jsfiddle, чтобы проверить это. Похоже, он отлично работает для тех, кто его поддерживает, а также для браузеров, таких как IE 6.

http://jsfiddle.net/V2R9J/ (Примечание: я изменил trim на сравнение пустой строки только для того, чтобы заставить его работать. Вместо этого вы можете / должны использовать свою собственную функцию усечения.)

Отказ от ответственности: Это не будет работать для полей, которые вставляются через ajax. Вы можете попробовать что-то с помощью live, или вы можете вручную вызвать метод. Кроме того, он работает с полями password, поскольку он просто заставит их показывать * или некоторые другие маркированные поля, но это уже было проблемой.

Это довольно экспериментально, но похоже, что это действительно крутое решение, которое позволяет людям, использующим более новые браузеры, получить некоторые удивительные функциональные возможности в html5, хотя и такие простые.

Answer 2

Для ввода вы хотите использовать .focus()

Демо: http://jsfiddle.net/rchern/aWdgZ/

Answer 3

$('#search').focus(function() {           
 $(this).val('');
 $(this).unbind('focus');
});