javascript - 创建通用的 javascript 或 jquery，使 div 或标签集在单击 div 或标签时集中于其内部的第一个输入

Question

我正在开发一个用于输入数据的表单，它使用表格来对齐其布局。我有两列，第一列用于输入标题，第二列主要用于输入标签。我已将第二列内的输入设置为透明且无边框，因此看起来我们确实在表格本身内进行了写入。只有一个问题:我给表格单元格添加了填充，使其感觉宽敞且不那么皱巴巴。因此，输入位于第二列上每个表格单元格的中心，周围有白色填充空间。如果我需要更改输入的内容，我需要精确地单击输入，这感觉很奇怪，因为我将 td 的光标 CSS 设置为光标:文本。我希望如果用户单击 td (或一般情况下的 div)，javascript 或 jquery 将自动仅选择第一个 text 输入或 textarea、>在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 或标记以检查其中的任何输入。

谢谢。

Answer 1

这个 jQuery 片段将实现您想要的。

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

1. 我们选择所有 td 元素
2. 我们删除任何 noautoselect 类的内容
3. 将我们的点击事件绑定(bind)到 tds

当我们的非“.noautoselect”tds 之一被点击时:

1. 使用 $(this) 选择 td - this 引用 jQuery 回调中的 DOM 元素
2. 在该元素中，查找具有某种文本类型的所有输入以及所有文本区域。
3. 聚焦这些元素。

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

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