Удаление заполнителя в фокусе

Я использую атрибут "заполнитель". для текста-заполнителя в полях ввода

Мне тоже нужна эта функциональность в IE-инкарнациях.

Я хочу, чтобы заполнитель скрывался на ФОКУСЕ! каждый найденный мной обходной путь скрывает заполнитель при вводе первого типа.

Я не могу решить это сам, ему нужно просто удалить текст-заполнитель ввода в фокусе, но также восстанавливает этот текст-заполнитель при размытии, если входное значение пусто.

Я пытаюсь заставить это работать

jQuery(document).ready(function () {

jQuery('[placeholder]').focus(function() {
  input = jQuery(this);
  if (input.val() == input.attr('placeholder')) {
    input.val('');
    input.removeClass('placeholder');
    input.attr('placeholder','')
  }
}).blur(function() {
  var input = jQuery(this);
  if (input.val() == '' || input.val() == input.attr('placeholder')) {
    input.addClass('placeholder');
    input.val(input.attr('placeholder'));
  }
}).blur().parents('form').submit(function() {
  jQuery(this).find('[placeholder]').each(function() {
    var input = jQuery(this);
    if (input.val() == input.attr('placeholder')) {
      input.val('');
    }
  })
});


});

это изменяет значение заполнителя на "(ничего)", и поведение такое, как я хочу, но при размытии он не может восстановить значение заполнителя, потому что теперь его "(ничего)"

//Обновлять

решение для меня:

$(function()
{
  $('input').each(function() 
  {
     $(this).val($(this).attr('holder'));
  });

  $('input').focus(function()
  {
    if($(this).attr('holder')==$(this).val())
    {
      $(this).val('');
    }
  });
  $('input').focusout(function()
  {
     if($.trim($(this).val())=='')
     {
       var holder = $(this).attr('holder');
       $(this).val(holder);
     }
  });
    });

javascript html jquery attributes placeholder
person john Smith    schedule 15.01.2013    source источник

Ответы (7)


arrow_upward
3
arrow_downward

Если вы не хотите использовать placeholder, вы можете использовать приведенный ниже код или этот простой плагин jQuery:

jQuery Placeholder.

Живая демонстрация кода jsFiddle ниже

HTML

<input type='text' holder='First name'><br>
<input type='text' holder='Last name'><br>
<input type='text' holder='Age'>


JavaScript

$(function() {

  $('input').each(function() {
     $(this).val($(this).attr('holder'));
  });

  $('input').focus(function() {
    if($(this).attr('holder')==$(this).val()) {
      $(this).val('');
    }
  });

  $('input').focusout(function() {
     if($.trim($(this).val())=='') {
       var holder = $(this).attr('holder');
       $(this).val(holder);
     }
  });
});

Также вы можете использовать этот простой плагин jQuery: jQuery Placeholder.

person Siamak A.Motlagh    schedule 15.01.2013
comment
IE lte 9 и Opera изначально не имели значения attr ('holder'), исправлено это добавлением $ ('# selector'). Val ($ ('# selector'). Attr ('holder')); вне функции - person john Smith; 15.01.2013
comment
хорошо, что каждый цикл намного более прототипичен, чем моя попытка - person john Smith; 15.01.2013

arrow_upward
3
arrow_downward

Используйте атрибут placeholder:

<input type="text" placeholder="Search here">

Для браузеров, не поддерживающих placeholder; вы можете использовать полифилл

person epoch    schedule 15.01.2013
comment
Я так и делаю, нужна функциональность tat и в ie-воплощениях, взгляните на мой отредактированный вопрос - person john Smith; 15.01.2013
comment
должно быть более простое решение, посмотрите мои правки и спасибо за ваше время - person john Smith; 15.01.2013
comment
нет ничего проще, чем добавить placeholder="whatever"; в случае IE простое добавление полифилла через yepnope не должно вызвать у вас никаких проблем. помните, что эти полифилы были тщательно протестированы и, вероятно, будут работать лучше, чем «более простое» решение. Его исчезновение onkeydown - стандартное поведение, не отталкивайте своих пользователей, меняя его :) - person epoch; 15.01.2013
comment
я не хочу, чтобы заполнитель больше существовал в фокусе, функциональность заполнителя = позволяет скрыть заполнитель, когда я ввожу в поле, а не в фокусе - person john Smith; 15.01.2013

arrow_upward
2
arrow_downward

Для браузеров на основе Webkit и Firefox вы можете скрыть заполнитель в чистом CSS:

input:focus::-webkit-input-placeholder, 
input:focus::-moz-placeholder { opacity:0; }
person pawel    schedule 15.01.2013

arrow_upward
2
arrow_downward

Старый и не лучший способ:

<input type="text" name="fname" value="Enter text here" onFocus="if (this.value=='Enter text here'){this.value='';}"
onBlur="if (this.value==''){this.value='Enter text here';}" />

Но работает даже в IE6.

person primetwig    schedule 15.01.2013
comment
да, это именно то, что я искал - person john Smith; 15.01.2013
comment
Не забудьте очистить значения заполнителей при отправке, иначе сервер получит фиктивные значения. - person pawel; 15.01.2013

arrow_upward
0
arrow_downward

Существует ряд полифилов, которые «добавляют» функциональность заполнителя в браузеры, которые ее не поддерживают. Раньше я использовал jQuery Placeholder, но в modernizr docs (прокрутите вниз до раздела с заполнителями).

Преимущество jQuery Placeholder в том, что вам не нужно изменять / добавлять какой-либо код, кроме ссылки на библиотеку. Просто добавьте атрибут placeholder к своему элементу.

person nsbingham    schedule 15.01.2013
comment
mathiasbynens.be/demo/placeholder есть и такое поведение, которого я не хочу, действительно не нашел скрипт, который удаляет и добавляет заполнитель для фокуса и размытия - person john Smith; 15.01.2013

arrow_upward
0
arrow_downward

вот мой код, чтобы скрыть текст заполнителя при вводе и фокусе textarea (). Просто и отлично работает.

$('textarea,input').focus(function(e){
    val=$(this).attr('value');
    if (!val)
    $(this).attr('value',' ');
    this.select();
}).blur(function(e){
    val=$(this).attr('value');
    if (val==' ')
    $(this).attr('value','');
});
person eapo    schedule 08.04.2013

arrow_upward
0
arrow_downward

Я использую эти 2 метода (jquery), чтобы скрыть заполнитель, когда ввод получает фокус, и когда он теряет фокус и является пустым заполнителем для отображения.

input.focus

  • шаг 1: просто сохраняем значение заполнителя в универсальную переменную (здесь pl)
  • шаг 2: установите для свойства заполнителя ввода значение ''

input.focusout

  • шаг-1: установить свойство заполнителя ввода для сохраненной переменной (здесь pl)

     var pl;
//on getting focus
$('input').focus(function(){
  pl=$(this).prop('placeholder');
  $(this).prop('placeholder','');
});
// on losing focus:
$('input').focusout(function(){    
  $(this).prop('placeholder',pl);
});
person Ali duzduzan    schedule 01.10.2020
comment
Это не дает ответа на вопрос. Как только у вас будет достаточная репутация, вы сможете комментировать любой пост; вместо этого предоставит ответы которые не требуют пояснений от автора вопроса. - Из отзыва - person Samvel Aleqsanyan; 02.10.2020
comment
Одного кода в ответ мало. Требуются некоторые пояснения. - person Mulli; 02.10.2020