1

If a custom placeholder element is positioned over an input, for instance with position: absolute, the input cannot be clicked. An almost cross-browser solution is to make the placeholder "non-interacting":

.noninteracting {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

However, pointer-events: none is not supported in IE. A number of alternatives have been suggested here, but they seem hacky and may be overkill for what I want to do.

What is the least hacky cross-browser way to place text above other elements, but not allow the user to interact with it?

Community
  • 1
  • 1
1''
  • 26,823
  • 32
  • 143
  • 200
  • Why don't you set the text's `z-index` so that it's positioned *behind* your `input`, and give your field a transparent background. – Joseph Silber Aug 25 '13 at 03:44
  • @JosephSilber I thought of that, but it falls under the 'hacky' category. – 1'' Aug 25 '13 at 03:46
  • @1" - I'd say it's the least hacky way, but I guess it's a matter of opinion... – Joseph Silber Aug 25 '13 at 03:47
  • @JosephSilber Fair enough. I've had issues with opacity in IE7 so I guess that colours my opinion. You also have to remove the transparency of the input element if you remove the placeholder, but that's a minor issue. – 1'' Aug 25 '13 at 03:50
  • @1" - Who said anything about using the `opacity` property? Just set the `input`'s `background-color` to `transparent`! – Joseph Silber Aug 25 '13 at 03:53

2 Answers2

0

You can also call focus on the input if your placeholder is clicked.

$(".placeholder").click( function(e){ $('.input').focus(); });
Jeffpowrs
  • 4,430
  • 4
  • 30
  • 49
  • Wow, why didn't I think of that? :) – 1'' Aug 25 '13 at 03:45
  • 1
    Very true. I'd say most sites being created now don't work with out javascript. I'll try and think of another non js answer though. – Jeffpowrs Aug 25 '13 at 03:59
  • @JoshC - I disagree that most sites don't work without JavaScript. Happens to be. you *sure can* log into this site without JavaScript. We should be building sites with graceful degradation (or progressive enhancement). I've posted a CSS-only solution above in the comments. – Joseph Silber Aug 25 '13 at 04:07
  • @JeffPowers This actually doesn't work in a subtle way: you lose control of where in the input the cursor is focused. – 1'' Aug 26 '13 at 20:02
  • Ah-ha, that's a good call. I'm going to try and come up with another solution that also doesn't need js. – Jeffpowrs Aug 26 '13 at 22:29
  • Actually, it's fine as long as you remove or hide the placeholder div when there's text in the input. When there's no text in the input, it's fine to use this solution because the cursor only needs to go one place. – 1'' Aug 27 '13 at 21:04
  • Oops, yeah I left that part out, I should have been more specific. Though as Joseph said this doesn't cover browsers with javascript disabled. My answer below covers all possible cases. – Jeffpowrs Aug 28 '13 at 15:43
0

I think this is the best option. It includes a number of different components but I believe it covers all possible scenarios.

Add a class "no-js" to the html element.

  <html class="no-js">

Each input field will have a label.

  <label class="no-js-label">Email Address</label>

If Javascript is enabled you will remove the class on the header, thus hiding the labels.

 .no-js-label { display:none; }
 .no-js .no-js-label { display:none; }

Then use an html5 placeholder with a polyfill. This list includes a number of options. https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

Jeffpowrs
  • 4,430
  • 4
  • 30
  • 49