icloud.com как поля ввода формы

Question

Как мне сделать поле ввода, как видно на iCloud ?

Я хочу, чтобы заполнитель оставался, пока кто-то не начнет печатать. Есть ли способ с помощью jQuery сделать это?

Answer 1

Возможно, вы имеете в виду функцию водяной знак .

Водяной знак обычно отображается в виде светло-серого текста внутри элемента input или textarea, когда элемент пуст и не имеет фокуса. Это дает пользователю подсказку о том, для чего используется элемент input или textarea, или о типе ввода, который требуется.

водяной знак http://jquery -watermark.googlecode.com / svn / trunk / jquery-watermark / wiki / sample-watermark.png

Если это так, вы можете попробовать jquery-watermark . Он изначально поддерживает HTML5 "заполнитель" (в браузерах, которые его поддерживают) и постепенно ухудшается в других / более старых версиях.

Примечание: Существует множество других плагинов. Поиск в Google «водяного знака jquery» или «заполнитель jquery» поможет вам найти их:)

Примечание 2: Для обеспечения максимально возможной совместимости Apple не полагается на атрибут заполнителя HTML5 и просто использует JQuery, чтобы скрыть перекрывающийся div при запуске пользователя типирование.

Answer 2

HTML5 Атрибут заполнителя?

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

Answer 3

Прочитать «Поля ввода HTML5, заполненные с помощью jQuery» - http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

Answer 4

Вам нужно использовать атрибут placeholder

<input type="text" id="user" name="user" placeholder="Please type your username" />

EDIT

хорошо, теперь я понял вашу проблему: согласно предыдущемукод, вам просто нужно связать keydown и проверить, является ли значение пользовательским значением или значением по умолчанию

$(document).ready(function(){
    $('#user').keydown(function(e){
        if($(this).val()=='Please enter your username'){
            $('#user').val('');
        }
    });

    $('#user').focusout(function(){
        if($(this).val() == ''){
            $(this).val('Please enter your username');
        }
     });
});

проверить это здесь: http://jsfiddle.net/G7s9u/41/