我正在尝试为 IE 9 及以下版本的 HTML 5 占位符编写简单的插件。我的问题是,虽然我给了我的输入更高的 z-index,标签元素仍然在它的“顶部”,因此焦点/点击有问题。
这是我的 JS 代码:
$.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;
}
当您尝试在 IE 下单击 input/textarea 时,光标不会变为“文本”之一,并且单击该区域没有任何效果,您需要单击标签范围之外的内容才能专注于输入。
JSFiddle:http: //jsfiddle.net/7SXBC/2/