Нажатие заполнителя не делает ввод активным

Question

Я использую обходной путь для заполнителя HTML5 с помощью jQuery.Единственная проблема заключается в том, что если я щелкну сам заполнитель <span>, поле ввода не станет активным.Чтобы он стал активным, я должен щелкнуть внутри ввода, но за пределами заполнителя.

Вот jsFiddle, показывающий, что происходит: http://jsfiddle.net/QXeQy/1/

Если я даю диапазону отрицательный z-index исчезает.Как я могу это исправить?

Answer 1

Ваш диапазон находится на пути вашего ввода. Попробуйте добавить это:

$("span.holder").click(function() {
    $(this).next().focus();
});

http://jsfiddle.net/QXeQy/2/

Answer 2

вместо диапазона используйте <label>

<label for="search">Placeholder text</label><input type="search" name="search" id="search" />

и затем используйте этот JavaScript:

$('#search').focus(function(){
  $('label[for=search]').hide();
}

$('#search').blur(function(){
  if($('#search').val() == '' )
    {
      $('label[for=search]').show();
    }
}