Question

我正在尝试为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下单击输入/文本区域时，没有光标变为“文本”，并且单击该区域不起作用，您需要单击标签范围之外以获得对输入的关注。

JSFiddle：http://jsfiddle.net/7SXBC/2/

Answer 1

我不确定您使用z-index尝试实现的目标。如果您在input之上获得label - 元素，则根本无法看到label。

为什么不绑定click的{{1}}事件来触发对label / input的关注？它看起来像这样：

textarea

更新：您的问题可能涉及以下错误：

Input boxes with transparent background are not clickable in IE8

Z-index和IE <9，适当的分层

1 个答案: