文本输入框，框内有标签

Question

I'm experimenting with a variety of techniques of putting the label for the text input box inside the box. Then the label disappears as you start typing, leaving the label in place for as long as possible before you start typing. Basecamp (basecamp.com) has a really good effect that I would like to emulate, but not sure how they are doing it.

When you click a text box that has a label inside it, the label doesn't go away until you start typing. That is relatively easy to script, with one catch: if you click inside the text box, your cursor could appear anywhere inside the label text... at the beginning, in the middle, at the end. Or, it could even select one or more characters instead of just inserting the cursor somewhere.

On the Basecamp site, you cannot select any of the label text. No matter where you click, the cursor appears at the far left (beginning) of the text box. Even if you double-click, it won't select the label text.

How are they doing this? Thank you.

Answer 1

Just use the placeholder attribute as mentioned in the comments above. A good fall back is https://github.com/mathiasbynens/jquery-placeholder

Also, if you want to style the placeholder in modern browsers you can use the following:

::-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

Have you tried using a placeholder like this?

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

Edit:

Looking at the basecamp's login page for example it seems they avoided the placeholder and did it with CSS using a class of overLabel:

<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;
}

Placeholder works just as well IMO.