0

I want a <p> tag (or a label might be correct actually) to appear behind an input field so that I can show the active caret on the input field and then hide the absolutely positioned <p> tag when the user starts to typing.

you can see what the problem is here: http://jsfiddle.net/captainill/BG7Kx/

In the jsfiddle I've given the input a value to illustrate the problem although in the solution there'd be no default text in the input.

relevant html:

<form name="tagset-form" id="tagset-form" action="" method="get">
            <p class="form-p-text">Add Set Name</p>
            <input id="tagset-name" class="text-input" type="text" value="some text that I would like to be above the <p> tag">
            <input id="tagsubmit" type="submit" value="" style="display:none;">                
        </form>

css:

input#tagset-name{
    width:100%;
    height:14px;
    padding:8px;
    line-height:15px;
    color:black;
    z-index: 2;
}

input:focus#tagset-name{
    color:white;
}
.form-p-text{
    z-index: 1;
    position:absolute;
    top:8px;
    left:180px;
    color:blue;
    font-weight:bold
}

EDIT: this jquery plugin does exactly what I want: http://o2v.net/blog/jquery-formlabels-plugin

It does so by creating a label, which when clicked, calls focus() on the input. It looks sharp too.

captainill
  • 2,049
  • 4
  • 17
  • 21
  • 2
    You want the text in the input field while it has focus, but go away when the user starts typing, correct? This will require scripting, if that's the kind of solution you're looking for. – kinakuta Jun 10 '11 at 06:14

2 Answers2

4

You could try the HTML5 placeholder attribute for <input>s, depending on how supported you want this to be.

http://diveintohtml5.ep.io/forms.html

Example:

<input type="text" placeholder="John Smith" name="full_name" />

Otherwise you can take a look at the onblur and onfocus events for <input>.

DanBeale
  • 310
  • 4
  • 15
Marty
  • 39,033
  • 19
  • 93
  • 162
  • 2
    +1 No need to reinvent the wheel. For browsers without `placeholder` support, use a plugin like this: https://github.com/mathiasbynens/Placeholder-jQuery-Plugin – kapa Jun 10 '11 at 06:29
  • i use that plugin because if you have a styled input with a height, chrome will show it unaligned. – corroded Jun 10 '11 at 06:37
  • @corroded Confused; do you mean to say that you **don't** use this plugin because of that? – Marty Jun 10 '11 at 06:37
  • sorry, i mean, i use the plugin because of that. placeholder is a chrome bug seen here: http://code.google.com/p/chromium/issues/detail?id=64407, although they do state it is fixed, it still happens to me – corroded Jun 10 '11 at 06:41
  • I didn't know about placeholder so I'm glad it came up but what I actually want is for the text appearing in the input to be visible after I give the input focus using jquery. I believe I will give the text field a value and use the method I found below to insert the caret at the zero index. From there I'll listen for the keypress event and remove the text. I'll report back. http://stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area – captainill Jun 10 '11 at 09:14
0

Problem explanation

The thing is that you set color:white on the input field when it has focus. That's why caret (as well as content value text) disappears when in focus. It's still there though. It's just not visible. If you'd type some text in and then double click input you'd see that edited text exists (selecting it will make it visible)

A possible non-HTML5 scripted approach

You probably want to set some init text and then reset it when input has focus. And afterwards to stay as user set it. This very simple jsFiddle shows how. It uses jQuery to acomplish desired behaviour. You could as well adopt it to set init text back to what it was when input stays empty. But my simple example doesn't do that. It's rather trivial to do that as well by binding blur event to input as well, that would check value and when empty remove the CSS class and set init text back in.

It does use some scripting though. I don't think this can be done purely by HTML+CSS. It would when input was a container element so you could use pseudo elements ::before or ::after.

Robert Koritnik
  • 103,639
  • 52
  • 277
  • 404