JQuery focus on the text box on the label click

Question

Is there a way to focus on the text box?

i.e. The username in the script below when you click on the username?

<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 does not work on iPad Safari. Basically, I would like the iPad keyboard to pop up when users click on the ie username shortcut in this scenario:

Here is my jQuery:

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

Answer 1

What you are trying to do simply will not work. It is not possible to bring the iPad keyboard before the user touches the text input element. This can be designed as Apple does not want the keyboard to become malicious / intrusive and keep popping on demand.

A workaround may be to force the user to click on the target text field and style it so that it knows to click on it.

Answer 2

Using jQuery :

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

Answer 3

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

Answer 4

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(); } }); }); }