Текстовое поле ввода с меткой внутри коробки

Question

Я экспериментирую с различными методами размещения ярлыка для ввода текста в коробке. Затем ярлык исчезает при вводе текста, оставляя ярлык на месте как можно дольше, прежде чем вы начнете вводить текст. Basecamp (basecamp.com) имеет действительно хороший эффект, который я хотел бы подражать, но не уверен, как они это делают.

Когда вы нажимаете текстовое поле с надписью внутри него, метка не исчезает, пока вы не начнете вводить текст. Это относительно легко для скрипта, с одним уловом: если вы нажмете внутри текстового поля, ваш курсор может появиться где угодно внутри текста метки ... в начале, посередине, в конце. Или он может даже выбрать один или несколько символов вместо того, чтобы просто вставлять курсор где-нибудь.

На сайте Basecamp вы не можете выбрать текст ярлыка. Независимо от того, где вы нажимаете, курсор появляется в крайнем левом углу (в начале) текстового поля. Даже если вы дважды щелкните, он не будет выбирать текст ярлыка.

Как они это делают? Спасибо.

Answer 1

Просто используйте атрибут placeholder, как указано в комментариях выше. Хорошее падение обратно https://github.com/mathiasbynens/jquery-placeholder

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

::-webkit-input-placeholder { 
    color: white; /* or any colour you like */ 
} 

:-moz-placeholder { /* Firefox 18- */ 
    color: white; 
} 

::-moz-placeholder { /* Firefox 19+ */ 
    color: white; 
} 

:-ms-input-placeholder { 
    color: white; 
} 

Answer 2

Вы пытались использовать заполнители, как это?

<input type="text" id="exampleInput" placeholder="Enter some text"> 

Edit:

Глядя на Basecamp-х login page, например, кажется, что они избегали заполнитель и сделал это с помощью CSS, используя класс сверху этикетку:

<label for="username" class="overlabel" style="">Username or email</label> 
<input autocapitalize="off" autocomplete="on" autocorrect="off" class="overlayable" id="username" name="username" title="Username or email" type="text"> 

body.login div.login_dialog span.overlay_wrapper label.overlabel { 
    position: absolute; 
    top: -2px; 
    left: 6px; 
    z-index: 1; 
    color: #999 !important; 
    font-size: 18px; 
} 

Заполнитель работает точно так же, как хорошо ИМО ,