0

我正在尝试为 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/

4

1 回答 1

1

我不确定你想用z-index. 如果您实现input在 顶部获得 - 元素label，您将根本看不到label。

为什么不绑定click-event来触发/label的焦点？它看起来像这样：inputtextarea

label.click(function(e){
    elem.trigger('focus');
});

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

带透明背景的输入框在 IE8 中不可点击

于 2013-03-06T13:01:32.020 回答