Jquery专注于标签点击上的文本框答案

【问题标题】：Jquery focus on text box on label clickJquery专注于标签点击上的文本框
【发布时间】：2011-05-05 06:36:20
【问题描述】：

有什么方法可以让我专注于文本框？

即当用户名标签被点击时，下面场景中的用户名？

<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>

它适用于 Mozilla 和 IE，但不适用于 iPad Safari。基本上，我想在用户点击标签时弹出 iPad 键盘，即在这种情况下的用户名：

这是我的 jQuery：

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

【问题讨论】：

将输入类型改为text，可能是无效的tel类型导致浏览器混淆。

标签： jquery ipad

【解决方案1】：

您尝试做的事情根本行不通。如果用户不触摸文本输入元素，就无法启动 iPad 键盘。这可能是设计使然，因为 Apple 不希望键盘变得恶意/侵入性并不断按需弹出。

一种解决方法可能是让用户的点击目标是一个文本字段，并设置它的样式以便他们知道要按下它。

【讨论】：

有趣，谢谢@Gary。这就解释了为什么它可以在 PC 上运行而不是在 IPAD 上运行。 Windows slates 也一样吗？
我不确定 Windows slates，它可能可以工作。最好的办法是找一个朋友尝试一下:-)
感谢@Gary，您能否举例说明“一种解决方法是让用户的点击目标成为文本字段，并设置其样式，以便他们知道按下它。”不太清楚你的意思。
实际上您已经有一个<input> 字段，因此用户可以单击该框并输入信息。用户这样做已经很直观了

【解决方案2】：

使用JQuery：

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

【讨论】：

感谢 nathan，它似乎不适用于 ipad。请看我更新的问题。

【解决方案3】：

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

【讨论】：

【解决方案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();
            }
        });
    });
}

【讨论】：