Очистить текст атрибута-заполнителя HTML5 в фокусе в Chrome

Можно ли очистить текст placeholder на фокусе в Chrome, Firefox очищает текст от фокуса, но Chrome не делает.

Это смущает пользователя, напечатан ли текст на панели, или текст заполнителя (даже если я изменил цвет текста на светло-серый), я не хочу использовать для этого лишний JavaScript или jQuery, я хочу знать, есть ли какое-то решение HTML/CSS для этого

Демо-скрипт

Предварительный просмотр Chrome (в фокусе)

Предварительный просмотр Firefox (в фокусе)

Ответы

Ответ 1

Попробуйте использовать

input:focus::-webkit-input-placeholder 
{
    color: transparent;
}

Это решит проблему. Текст отображается в фокусе из-за автоматической фокусировки на загрузке страницы.

Ответ 2

Теперь firefox работает по-другому, поэтому я использовал этот код:

input:focus::-webkit-input-placeholder{
    color: transparent!important;
}
input:focus::-moz-placeholder{
    color: transparent!important;
}
input:focus:-moz-placeholder{
    color: transparent!important;
}

Ответ 3

Это то, как хром обрабатывает его, и пользователи хром, вероятно, ожидают, что это будет обработано так. Однако вы можете использовать jQuery для удаления атрибута "placeholder", когда он сфокусирован.

Я нашел явное исправление для вас, из группы go @@https://github.com/mathiasbynens/jquery-placeholder/issues/51#issuecomment-4193018

// Fixing Webkit that not clearing input/textarea when get focus
$(function(){
  if ($.browser.webkit) {
    $('input, textarea').on('focus',function(){
      if ( $(this).attr('placeholder') ) $(this).data('placeholder', $(this).attr('placeholder')).removeAttr('placeholder');
}).on('blur', function(){
        if ( $(this).data('placeholder') ) $(this).attr('placeholder', $(this).data('placeholder')).removeData('placeholder');
    });
  }
});

Ответ 4

Я обнаружил, что решение Shubhanshu не работает для меня, но я нашел это в трюках CSS, которые работали в Chrome, не работает ', похоже, работает в FF.

[placeholder]:focus::-webkit-input-placeholder {
  color: transparent;
}