Input text inside a link tag in IE8

Question

Is there a way to make input text inside a link tag works well in IE8? I cannot place the caret inside nor select the text within it.

<a href="#"><input type="text"></a>

I think the reason why I'm trying to do this is not important here, just consider I have no choice of make it work under an <a> tag. I only have control over what's inside the <a> tag.

As a solution, I was thinking about some JQuery DOM manipulation when in IE8 mode but there must be a easier/cleaner way of fixing this "bug".

Thanks

Answer 1

I think this is due to the input and link tag display properties, while an input is display:inline-block; your link is display:inline;. Try to play with these properties and z-index if it's not working.

Hovever, i think jQuery solution is better, and simpler, except if this is your only usage of jQuery on your page.

HTML :

<a href="#" id="myInputLink"><input type="text" /></a>

jQuery script

jQuery(document).ready(function(){
    $("#myInputLink").click(function(){
        // .trigger('focus') or .focus(), but the first one is better on my own
        $(this).next('input[type="text"]').trigger('focus');
    });
});

Have a nice day.