Текстовое поле комментария, показывающее текст по умолчанию, который исчезает, когда пользователь фокусирует его

Question

Эй, ребята, я создаю поле для комментариев и хочу сделать два элемента в поле для комментариев, которые, как мне кажется, нуждаются в javascript, но я пока не профессионал в использовании JavaScript. Я хочу, чтобы в поле для комментариев отображался какой-то текст (напишите ваш комментарий), и когда пользователь щелкнет по нему, текст исчезнет. Кроме того, я хочу показывать кнопку отправки только тогда, когда пользователь нажимает на поле для комментариев. Знаете ли вы, как я могу это сделать?

Answer 1

Я разместил страницу, показывающую, как это сделать с простым JavaScript.Я абстрагировал код для того, чтобы текстовые вводы / области отображали учебный текст, пока он не сфокусирован.измените значение (и, необязательно, классы) на основе существующего значения / «полезного» значения.

просмотрите focus и blur поля комментария и измените класс CSS другого элемента, чтобы отобразить и скрытьit.

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

Редактировать : ОК, я добавил версию jQueryпримера .Я решил не использовать плагин для самоописания, так как это всего 8 строк.Я также изменил этот конкретный пример, чтобы использовать атрибут title для хранения текста по умолчанию для отображения.

Edit # 2 : Исходя из указанной проблемы @Meke, я сделалнезначительное обновление скриптов для обработки случая, когда FireFox перезагружает страницу и оставляет текст по умолчанию на месте, а затем (ранее) неправильно добавлял класс, чтобы указать, что это был текст по умолчанию.

IСледует также отметить, что ни один из моих примеров не включает обработчик событий submit для формы, чтобы удалить значение для входных данных, которые все еще показывают значение по умолчанию.Это (довольно тривиальный код) - это то, что вы хотели бы добавить.

Также обратите внимание, что фактическое изменение value кода input / textarea, подобного этому, может нарушить проверку формы, не подготовленной для ее понимания.

Answer 2

Поскольку версия Phrogz jQuery не очень хорошо работает с перезагрузками, я решил сделать свою собственную, основываясь на том, что я знал, вот так:

Все, что вам нужно сделать, это поместить "placeholder =[текст] "во входных данных, чтобы оно появилось (это имя было выбрано, поскольку HTML5 использует" заполнитель "для той же функции.

    $('input:text').each(function(){
            $(this).val($(this).attr('placeholder')).css('color','#900');
            $(this).focus(function(){
                // If value is same as 'placeholder', clear field
                if($(this).val() === $(this).attr('placeholder')){
                    $(this).val('').css('color','#000');
                } else { // Else select the whole text (one less click)
                    $(this).select();
                }
            });
            $(this).blur(function(){
                // On blur, if empty field, put placeholder back
                if ($(this).val() === ''){
                    $(this).val($(this).attr('placeholder')).css('color','#900');
                }
            });
        });