I am currently working on developing a straightforward plugin to create HTML5 placeholders for Internet Explorer 9 and earlier versions. My current issue is that even though I have assigned a higher z-index to my input field, the label element still appears "on top" of it, causing a problem with focus/click functionality.
Below is the JavaScript code I have written:
$.fn.placeholder = function () {
return this.each( function () {
var elem = $( this );
if ( elem.is( "input" ) || elem.is( "textarea" ) ) {
var placeholder = elem.attr( "placeholder" ),
wrapper = $( "<span></span>" ).css( {"position":"relative", "display":"inline-block"} ),
label = $( "<label></label>" ).text( placeholder ),
border = elem.outerWidth() - elem.innerWidth(),
paddingH = elem.innerWidth() - elem.width(),
paddingV = elem.innerHeight() - elem.height(),
left = elem.outerWidth( true ) - elem.width() - Math.floor( (paddingH / 2) ) - border,
top = elem.outerHeight( true ) - elem.height() - Math.floor( (paddingV / 2) ) - border;
label.css( {
"position":"absolute",
"top":top,
"left":left,
"color":"#a9a9a9",
"z-index":10
} );
elem.css( "z-index", 1000 ).css( "position", "relative" );
elem.wrap( wrapper );
elem.parent().prepend( label );
elem.focus( function () {
elem.parent().find( "label" ).hide();
} );
elem.blur( function () {
elem.parent().find( "label" ).toggle( $.trim( elem.val() ).length == 0 );
} );
}
} );
};
//somewhere on document.ready
$("input").placeholder();
$("textarea").placeholder();
HTML:
<div>
<input type="text" placeholder="Some placeholder" name="name">
<textarea name="request" placeholder="Other placeholder"></textarea>
</div>
CSS:
input {
padding: 5px 10px;
background: transparent;
}
textarea {
resize: none;
padding: 30px;
background: transparent;
}
Under Internet Explorer, when attempting to click on an input/textarea field, the cursor does not change to indicate text entry, and clicking in that area has no effect. You must click outside of the label's range to successfully focus on the input field.
JSFiddle: http://jsfiddle.net/7SXBC/2/