Question

Is there any way to detect in javascript, if the following html5 or css 3 feature is available on a browser.

for example, i have an attribute : placeholder,

<input type="text" placeholder="type your email address" />

i set a javascript function, that would set a manual placeholder, if placeholder attribute is not supported by the browser

---

if i use Modernizr, would this do :

if ( Modernizr.testProp('placeholder') )
// add attribute placeholder
else
// assign a keypress event as placefolder

Answer 1

In a simple case like this, you can do things directly without involving Modernizr:

<input type="text" placeholder="type your email address" 
  id="email">
<script>    
var email = document.getElementById('email');
if(!('placeholder' in email)) {
  email.value = email.getAttribute('placeholder');
  email.onfocus = function () { this.value = ''; };
}
</script>

In this approach, the placeholder attribute appears in static HTML markup. It does no harm when not supported; in fact, it can even be useful when not supported.

The point is that when placeholder is supported, a property with that name exists for the element node. Even when it is not supported, the browser has parsed and stored it, so that you can get it with getAttribute() and assign the value to the value property, to make it appear as the initial content.

The code clears the field when focused. This sounds better than clearing it whenever clicked on, as the user might click on the field for several reasons after typing part of the data.

P.S. For usability, accessibility, and simplicity, it is better to use a visible label for every input field, instead of using placeholders. So this does not like a good use case. But the same technique can be used e.g. for a very simple search form that sites often have as part of site-wide navigation system; there it can make sense to squeeze the form to a very small size, omitting labels.