Anchor link to input box (same behaviour as label for="...")

Question

I need to set an anchor tag using eg. <a href="#firstname">Test</a> to have the same behaviour as a <label for="firstname">Blah</label>, by putting the cursor inside the input box.

Steps to reproduce

The Form Input has an id="firstname", the link has an href="#firstname".

1. Keyboard Tab to the link
2. Hit Enter

Expected Behaviour

1. Focus is on the text input
2. Input is highlighted
3. Typing enters data into the field

Actual Behaviour

• ✅ Chrome: Works.
• ❌ Firefox: Field is not highlighted and typing does not enter data into the field.
• ❌ Safari: Field is highlighted, but typing does not enter data into the field.

JSFiddle

https://jsfiddle.net/78vmnxdy/

Any ideas how to achieve this?

Answer 1

You can achieve that with simple focus() function of jQuery

jQuery:

$("#button").click(function(){
    $("#inputText").focus();
});

Working Example: http://jsfiddle.net/Lrmqr/

Hope this is what you are looking for!