Jquery focus on text box on label click

Question

Is there any way I can focus on text box?

i.e. Username on scenario below when username label is clicked?

<tr>
    <td valign="middle" class="loginText">
        <b>
            <label for="UserName">
                UserName:</label></b>
    </td>
    <td valign="middle" >
        <input type="tel" maxlength="6" value="" name="UserName" id="UserName" data-val-required="The User name field is required."
            data-val="true" /><br />
        @Html.ValidationMessageFor(m => m.UserName)
    </td>
</tr>

It works on Mozilla and IE but doesn't work on iPad Safari. Basically, I would like to iPad keyboard to popup when users click on label i.e. username in this scenario:

Here's my jQuery:

$("label[for]").click(function () {
                var inputid = '#' + $(this).attr('for');
                alert(inputid);
                $(inputid).focus();
            });

Change the input type to `text`, probably the invalid `tel` type is confusing the browser. — Shadow The GPT Wizard, May 05 '11 at 06:42

score 2 · Accepted Answer · answered May 05 '11 at 07:18

2

What your trying to do simply won't work. It's not possible to bring the iPad keyboard up without user touching the text input element. This could be by design as Apple don't want the keyboard to become malicious/intrusive and keep popping up on demand.

One workaround could be to make the user's click target a text field, and style it so they know to press on it.

answered May 05 '11 at 07:18

Gary Green

22,045
6
49
75

Interesting, thanks @Gary. This explains why it works on PC and not in IPAD. Is it same in windows slates too? – Nil Pun May 05 '11 at 10:06
I'm not sure about windows slates, it's possible it could work. The best thing would be to get a friend who has one to try it :-) – Gary Green May 05 '11 at 10:50
thanks @Gary, would you be able to give an example of "One workaround could be to make the user's click target a text field, and style it so they know to press on it." Not quiet sure what you mean. – Nil Pun May 05 '11 at 22:33
Well actually you already have an `` field so the user can click on that box and input the information. It is already intuitive to the user to do that – Gary Green May 06 '11 at 08:04

score 0 · Answer 2 · edited Feb 01 '18 at 08:27

http://v4.thewatchmakerproject.com/blog/how-to-fix-the-broken-ipad-form-label-click-issue/

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/iPad/i)) {
    $(document).ready(function () {
        $('label[for]').click(function () {
            var el = $(this).attr('for');
            if ($('#' + el + '[type=radio], #' + el + '[type=checkbox]').attr('selected', !$('#' + el).attr('selected'))) {
                return;
            } else {
                $('#' + el)[0].focus();
            }
        });
    });
}

score 0 · Answer 3 · answered May 05 '11 at 06:39

0

Using JQuery:

$(document).ready(function() {
  $('#mylabelid').click(function() {
     $('#mytextboxid').focus();
  });
});

answered May 05 '11 at 06:39

Nathan

6,095
2
35
61

thanks nathan, it doesn't seem to work on ipad. pls see my upaded question. – Nil Pun May 05 '11 at 06:40

score 0 · Answer 4 · edited May 05 '11 at 06:43

0

$("label").click(function(e){  
    if($(this).attr("for") == "UserName")  
    {  
        $("#UserName").focus()  
    }  
})

edited May 05 '11 at 06:43

kapa

77,694
21
158
175

answered May 05 '11 at 06:41

Mayank

5,454
9
37
60

Jquery focus on text box on label click

4 Answers4

Linked