聚焦给定html输入标签的元素？ jQuery答案

【问题标题】：Focus an element given an html input tag? Jquery聚焦给定html输入标签的元素？ jQuery
【发布时间】：2021-11-15 08:14:12
【问题描述】：

我返回了一个 html 标签“tabbedCell”，可以在下面查看：

<input type="text" data-row-id="12630" class="edit numeric ui-draggable ui-draggable-handle" data-field="May" value="135" style="position: relative; cursor: cell;">

我正在尝试将焦点设置在此元素上，但是我已确认在设置焦点后焦点元素未定义。有什么建议吗？

编辑：我的页面上有多个输入，因此答案不起作用。如果存在多个，我需要关注这个特定的输入元素。

console.log(tabbedCell)
$(tabbedCell).focus();
console.log(($(':focus')[0]));

【问题讨论】：

为我工作：jsfiddle.net/barmar/mb9xg2r1/1
您没有正确选择元素，是吗？你说的是 $(tabbedCell) 但你的输入元素上不存在这样的值？
我还验证了如果我正确获得参考，它可以正常工作。您需要共享更多代码，因为问题不在于您在此处共享的内容。
我添加了更多上下文。不幸的是，假设这是页面上唯一的输入标签的解决方案。
这里缺少上下文。 tabbedCell 来自哪里？相对于输入元素，您的 JS 位于何处？您确定在执行 JS 之前呈现输入吗？否则，您需要等待 DOM 就绪事件...

标签： javascript html jquery dom input

【解决方案1】：

添加 id="sample_input"

<input type="text" id="sample_input" data-row-id="12630" class="edit numeric ui-draggable ui-draggable-handle" data-field="May" value="135" style="position: relative; cursor: cell;">

这就是你专注的方式
# -> 表示 id

$("#sample_input").focus();

编辑：由于您不想添加另一个 id，请使用：

$("input[data-row-id=12630]").focus();

编辑 2：像这样

$("input[data-row-id=12630][data-field=May]").focus();

【讨论】：

我无法添加另一个 id，有没有办法通过考虑 data-row-id 和 data-field 属性来做到这一点？
更新答案看看
无论如何都要考虑 data-field="May" 吗？因为有多个输入具有相同的数据行 ID。
最接近的解决方案！我最终将 data-field 附加到 data-row-id 以便它是唯一的，因此可以聚焦。谢谢！

【解决方案2】：

改用元素的 ID 或类，像这里你可以使用“编辑”。

$(".edit").focus();

【讨论】：

这不起作用我有多个具有相同 id/class 的输入 - 是否可以根据 data-row-id /data-field 进行区分
这个元素没有id。为这个任务使用一个唯一的 id，然后专注于它。顺便说一句，相同的ID不应该在多个元素中使用，可以使用类。