Получение заполнителя, чтобы исчезнуть / появиться и позиционировать курсор впереди

Question

Я абсолютный новичок в JavaScript, jQuery и во всем остальном, поэтому, когда я увидел, что HTML5 поддерживает заполнители, я был удовлетворен.То есть, пока я не хотел улучшить свое поведение.То, что я пытаюсь сделать, это взять то, что я узнал в этом посте (в частности, , соответствующий jsFiddle ), но изменив его так, чтобы:

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

Я видел гладкие реализации, которые делают именно то, что я ищуdo (особенно с домашних страниц Tubmlr и Square и со страницы «Присоединиться» на Foursquare), и я надеюсь выяснить, как это сделать сам.

Код из вышеупомянутого jsFiddle, который я хочу изменить /Улучшение:

$('.placeholder').each(function(){
    $(this).data('placeholder', $(this).attr('data-title'));
    $(this).val($(this).attr('data-title'));
});

$('.placeholder').live('keydown', function(){
    if ($(this).val() == $(this).data('placeholder')) {
        $(this).val('');         
    }
});

$('.placeholder').live('blur', function(){
    if ($(this).val().trim() == '') {
        $(this).val($(this).data('placeholder'));
    }
});

Может кто-нибудь помочь мне объяснить это?

Answer 1

<style>
form div { 
 position:relative; 
}
div label { 
  position:absolute;
  top:0;
  left:0;
  color:#666;
}
div input {
  background: transparent;
}
</style>
...
<script>
$(document).ready(function() {
  $('input').keyup(function() {
    if ($(this).val().length) {
      $('label[for='+$(this).attr('name')+']').fadeOut();
    } else {
      $('label[for='+$(this).attr('name')+']').fadeIn();
    }
  });
});
</script>
...
<form>
<div>
<label for="name">Name</label>
<input id="name" name="name" />
</div>
</form>

http://jsfiddle.net/Pbn5K/4/

Answer 2

Редактировать - мне показалось, что Tumblr настраивает фоновое изображение с текстом, отображаемым в нем (обратите внимание, текст не выделяется) в фокусе.Так что просто поместите фоновое изображение на входе, когда оно имеет фокус, а затем удалите его на размытие.Это не то, как они это делают, как указывает js1568.Тем не менее, это то, как я реализовал в другом месте.Упомянутый метод метки тоже выглядит проще и понятнее.

$(your input selector here).focus(function(){
  $(this).css('background-image', 'url(background image with text in it.png)');
});

$(your input selector here).blur(function(){
  $(this).css('background-image', 'url(background image in different color with text in it.png');
});

Когда пользователь начинает печатать, он меняет фоновое изображение, поэтому вам нужно будет проверить значение ввода, пока он печатаетпосмотрите, пусто ли это - если нет, удалите фоновое изображение:

$(your input selector here).keypress(function(){
  if ($(this).val() != "") {
    $(this).css('background-image', '');
  }
});