1

I'd like to place a custom placeholder text element above a text input (input type='text' or textarea). However, I can't figure out how to make the text input clickable when the placeholder text element is right above it. Setting pointer-events:none to make the placeholder unclickable works great, but is not supported in older versions of IE.

Workarounds to pointer-events:none typically involve manually triggering the onclick of the child element. However, for a text input, the onclick is done implicitly by the browser, so there's no event to trigger.

Other solutions I've considered include setting an onclick on the placeholder to focus the text input, but this means the cursor is always placed at the end of the input. I want to be able to click on the text input and have the cursor appear where I click.

Another option is to use z-index to place the placeholder below the input, and then make the input transparent. However, this also removes the default border of the input, which is undesirable.

How can a text input be clickable even when text is showing above it, using only HTML/CSS and pure Javascript (no jquery)?

1''
  • 26,823
  • 32
  • 143
  • 200
  • 2
    Hiding the overlay is easy. Selecting the entire text is easy. Figuring coordinates inside a textbox and mapping them to the text within and dropping the cursor there....hmmmm, that's a tough one. – Diodeus - James MacFarlane Aug 26 '13 at 20:41
  • I'm having a hard time understanding what you're trying to accomplish. When you say 'right above it', do you mean right before it or are you rendering your text on top of the input such that the text obscures what is in the input? – Gerald Aug 26 '13 at 20:54
  • I think the `` element is what you want. – ddavison Aug 26 '13 at 21:05
  • does this SO answer help you at all? http://stackoverflow.com/questions/512528/set-cursor-position-in-html-textbox – blurfus Aug 26 '13 at 21:46
  • @blurfus This would work, if I could figure out how many characters correspond to a given click position. Do you know if this is possible? – 1'' Aug 26 '13 at 22:02

1 Answers1

4

You can do this without Javascript. Just use a <label> tag like this:

<label class="placeholder" for="name">Name</label>
<input type="text" id="name">

By using the for and id attributes when clicking on the label, browser will switch focus to the linked form field. Then You can for example hide the placeholder by listening on the focus event in JavaScript. You will need to style the placeholder label to use position: absolute. See live example (scroll down for some forms).

The above method of defining placeholder text has some advantages:

  1. You actually define a label for a field. This probably can help accessibility.
  2. You separate form field's value and placeholder text, so You can support forms that are partially filled.
  3. You can support more browsers than by using the placeholder attribute.
  4. You can style the label tag however You like, which is not so easy for the placeholder attribute. You can even use CSS or JS animations!
HankMoody
  • 3,077
  • 1
  • 17
  • 38
  • This has the same problem as setting the focus of the text input directly: you can't choose where the cursor goes. Otherwise, it's a nice solution, but it's not what I'm looking for. – 1'' Aug 26 '13 at 21:34
  • Placeholders are not meant to be used as initial form field values, but hints. They usually dissapear on focus or when user types first character into a field. – HankMoody Aug 26 '13 at 21:38
  • Yes, but if you already have a paragraph of text, you can't click in the middle of it and start typing. The click positions your cursor at the start or end of the text, depending on the type of element. – 1'' Aug 26 '13 at 21:40
  • Maybe You can describe Your use case? You want an editable placeholder? Why You can't just use the `value` attribute on the `input` element? – HankMoody Aug 26 '13 at 22:10
  • Sorry, this is fine after all. The piece I was missing is that I need to hide or remove the placeholder element when it's not showing, rather than just removing its text. – 1'' Aug 27 '13 at 03:29
  • Actually, it's still better to use a div rather than a label and explicitly focus the input in the placeholder's `onclick()`, for IE7 support. – 1'' Aug 27 '13 at 14:05