Ввод текстовой метки над полем ввода

Question

У меня есть следующие формы входа:

div.field { 
    position: relative; 
} 
label { 
    font-size: 14px; 
    position: absolute; 
    top: 20px; 
    left: 3px; 
}​ 

<div class="username field"> 
    <label for="username">Enter email</label><br /> 
    <input type="text" class="field" name="email" id="id_email"> 
</div> 
<div class="password field"> 
    <label for="password">Enter password</label><br /> 
    <input type="password" class="field" name="password" id="id_password"> 
</div>​ 

http://jsfiddle.net/5yBz5/

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

Answer 1

Вместо этого вы должны проверить атрибут html5 placeholder. Это рекомендуемый способ сделать это.

Пример:

<input type="text" placeholder="placeholder text"></input> 

Answer 2

Добавить onclick="this.innerHTML=''" к label элементов. Это далеко не идеальное решение, но решение, которое имеет оптимальное удобство использования, будет иметь другой подход (элемент метки перед элементом ввода), и проблема не возникнет.

Answer 3

Метод 2:

Использование JQuery (опция) для захвата щелкните событие на этикетке, то фокус ввода элемента:

​$("label").on("click",function(){ 
    $(this).parent().children("input").focus(); 
});​​​ 

http://jsfiddle.net/SsZTh/

Answer 4

Использование этикетки для Заполнитель текста просто не очень хорошая идея, так как это дает ужасный пользовательский опыт для тех, кто пытается заполнить вашу форму.

Это в стороне вот несколько вещей, чтобы сделать примечание:

• закрыть ваши input теги
• для атрибута <label> тега должен быть равен атрибуту id родственного элемента для связывания их вместе.

Если вы хотите, чтобы текст владельца места выполнял замену текста на javascript. Например:

<div> 
    <label for="email">Enter email</label> 
    <input type="text" class="defaultText" name="email" id="email" title="Enter email" /> 
</div> 
<div> 
    <label for="password">Enter password</label> 
    <input type="text" name="password" id="password" /> 
</div> 

Примечания, использование JQuery:

$(function() { 
    $(".defaultText").focus(function() { 
     if ($(this).val() == $(this)[0].title) { 
      $(this).removeClass("defaultTextActive"); 
      $(this).val(""); 
     } 
    }); 

    $(".defaultText").blur(function() { 
     if ($(this).val() == "") { 
      $(this).addClass("defaultTextActive"); 
      $(this).val($(this)[0].title); 
     } 
    }); 

    $(".defaultText").blur(); 
})(); 

пример скрипка: http://jsfiddle.net/5yBz5/4/

Answer 5

Установите Z-индекс наклеек на -1 и сделать поле ввода прозрачным. Таким образом, метки отображаются «за» поля ввода, поэтому при нажатии на него поле ввода принимает событие вместо метки.

div.field { 
    position: relative; 
} 
label { 
    font-size: 14px; 
    position: absolute; 
    top: 20px; 
    left: 3px; 
    z-index:-1; 
} 
input { 
    background: transparent; 
}