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 で入力/テキスト領域をクリックしようとしても、カーソルが「テキスト」領域に変化せず、その領域をクリックしても効果がありません。入力にフォーカスするには、ラベル範囲の外側をクリックする必要があります。

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

4

1 に答える 1

1

で何を達成しようとしているのかわかりませんz-index。inputの上に-elementを取得すると、はまったく表示されlabelなくなりますlabel。

clickの-eventをバインドして、 /labelにフォーカスをトリガーしてみませんか？次のようになります。inputtextarea

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

更新：あなたの質問には次のバグが含まれている可能性があります：

背景が透明な入力ボックスは、IE8ではクリックできません

于 2013-03-06T13:01:32.020 に答える