Z-index and IE<9, proper layering

Question

I'm trying to write simple plugin for HTML's 5 placeholder for IE 9 and below. My problem is that, although I've given my input higher z-index, the label element is still "on top" of it, therefore there's problem with focus/click.

Here's my JS code:

$.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;
}

When you try to click input/textarea under IE, there's no cursor change into "text" one, and clicking that area gives no effect, you need to click outside of label range to get focus on input.

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

Added live example on jsfiddle, but there's bug in IE 8 on it, so I don't know if it's any help — kamil, Mar 06 '13 at 13:00

score 1 · Accepted Answer · edited May 23 '17 at 12:11

1

I'm not sure what you are trying to achieve with the z-index. If you achieve to get the input-element on top of the label, you won't be able to see the label at all.

Why not bind the click-event of the label to trigger the focus on the input/textarea? It would look something like this:

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

UPDATE: Your question may involve the following bug:

Input boxes with transparent background are not clickable in IE8

edited May 23 '17 at 12:11

Community

1
1

answered Mar 06 '13 at 13:01

Justus Romijn

15,699
5
51
63

I'm able to see `label` but putting `background: transparent` for input – kamil Mar 06 '13 at 13:04
This's it, by creating for input/textarea `background: url(transparent-img.png);` the whole area is clickable :) – kamil Mar 06 '13 at 13:15

Z-index and IE<9, proper layering

1 Answers1