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

It works under ie9, firefox, chrome. So maybe it's just a standard IE8 doesn't respect again. — sveilleux2, Aug 21 '13 at 14:23
For those you want more information. This is because I'm using angular ui-bootstrap and tab heading are inside A tags. But I need to show a input text inside the tabs instead of simple text. — sveilleux2, Aug 21 '13 at 14:26

Eric Martin · Answer 1 · 2013-08-22T14:32:33.667

0

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.

edited Aug 22 '13 at 14:32

answered Aug 21 '13 at 14:39

Eric Martin

2,247
1
16
16

Thanks for you time but both the solutions doesn't seems to works on IE8. Even with a focus() forced, it still doesn't let me place the cursor inside the input textbox. Also having 2 id with the same value is invalid in css. – sveilleux2 Aug 21 '13 at 15:05
Sorry, i forgot to delete the second id on input. – Eric Martin Aug 22 '13 at 14:32
Can you try to share your code in a jsfiddle or whatever ? Just an extract to have a better view of your problem – Eric Martin Aug 22 '13 at 14:37
It won't be possible since IE8 doesn't work support nor plunkr and fiddle. But it's quite easy to test it on your side. Just create a simple HTML page and just do: – sveilleux2 Aug 22 '13 at 16:56

Input text inside a link tag in IE8

1 Answers1