创建一个通用javascript或jquery，使div或标记集在单击div或标记时聚焦于其中的第一个输入

我正在开发一个表单来输入数据，它使用表来对齐它的布局。我有两列，第一列是输入标题，第二列主要是输入标签。我已经将第二列中的输入设置为透明且无边框，因此看起来我们实际上是在表本身中写入的。只有一个问题：我给桌子的单元格填充物，让它感觉宽敞，不那么皱。因此，输入位于第二列上每个表单元格的中心，周围有一个空白填充空间。如果我需要更改输入的内容，我需要准确地单击输入，当我将td的cursorcss设置为cursor:text时，感觉很奇怪。我希望，如果用户单击td（或div，一般来说），javascript或jquery将只自动选择td内的第一个文本输入或文本区域，

示例代码：

<table>
    <tr>
        <td>Name</td>
        <td><input type="text" name="name"></td>
    </tr>
    <tr>
        <td>Address</td>
        <td><textarea name="address" cols="40" rows="5"></textarea></td>
    </tr>
    <tr>
        <td>Gender</td>
        <td>
            <input type="radio" name="sex" value="male">Male<br>
            <input type="radio" name="sex" value="female">Female
        </td>
    </tr>
    <tr>
        <td>Day of Birth</td>
        <td class="noautoselect">
            <input type="text" name="day">
            <input type="text" name="month">
            <input type="text" name="year">
       </td>
    </tr>
</table>

名称
地址
性别
男性

女性
出生日期

在第一个和第二个示例中，我希望用户可以单击第二个td，并将输入或文本区域设置为焦点

在第三个示例中，我不希望用户设置焦点或选择第一个选项，因为他们不小心单击了td区域。它们不是文本输入，因此不需要在自动对焦选择中计算它们。在td上没有其他的输入文本，所以没有输入需要获得任何焦点

在第四个示例中，我不希望用户总是设置焦点或选择第一个输入（天），例如，如果用户在想要单击月份输入时意外地单击了整个td区域。因此，我为td

noautoselect

设置了一个类，以有选择地排除任何td或标记，以便检查其中的任何输入

---

谢谢。

这个jQuery代码片段将满足您的需要

$("td").not(".noautoselect").on("click",function(){
    $(this).find("input[type='text'], textarea").focus();
});

我们选择所有td元素

我们删除任何具有noautoselect类的对象

将单击事件绑定到tds

单击我们的一个非“.noautoselect”tds时：

使用

$（this）

选择td-这是指jQuery回调中的DOM元素

在该元素中，查找具有文本类型的所有输入以及所有文本区域

关注这些要素

这将尝试聚焦它选择的所有内容，因此如果有效td中有多个输入或文本区域，它将聚焦最后一个，因为这是调用聚焦事件的最后一个。为了避免这种情况，我们可以选择第一种：

$("td").not(".noautoselect").on("click",function(){
    $(this).find("input[type='text'], textarea").first().focus();
});

或者，如果有超过1个，我们真的不想自动对焦

$("td").not(".noautoselect").on("click",function(){
    var $inputs = $(this).find("input[type='text'], textarea");
    if ( $inputs.length == 1 ){ $inputs.focus(); }
});

---

为了避免将来被炒鱿鱼，你应该经常发布你试图解决问题的任何代码，并详细描述它是如何工作的。我希望这个问题有一个通用的解决方案，这需要能够使用我尚未开发的代码。除了字段名之外，这个代码和我的工作代码几乎相同。哦。。。天哪。这是非常优雅，它的工作！这就像魔术！这就像你在把需求从英语翻译成代码！我不理解jQuery，所以当我试图自己用Javascript构建这段代码时，它对我来说非常复杂，而且也不起作用。所以我想也许用jQuery会更简单，但我一点也不懂。你还用这个小代码给了我一个速成课程，对此我非常感谢。我希望我能把你的答案投上百万次！谢谢