如何在动态创建的选择上将焦点移动到下一个元素答案

【问题标题】：How to move focus to next element on enter on dynamically created select如何在动态创建的选择上将焦点移动到下一个元素
【发布时间】：2021-12-29 23:05:45
【问题描述】：

html 表单包含输入元素。

Javascript 和 jquery 代码用于在运行时创建选择元素并将其插入元素 elem 之后并为其分配 Bootstrap 5 类：

let selectArray = ["Intv Scheduled", "Selected", "Rejected", "On Hold"];
let id = 'Customer';

$('#' + id).remove();

var selectList = document.createElement("select");
selectList.id = selectList.name = id;
selectList.className = "form-select";

elem.after(selectList);
for (var i = 0; i < selectArray.length; i++) {
    var option = document.createElement("option");
    option.value = option.text = selectArray[i];
    selectList.appendChild(option);
}  
selectList.focus();

用户使用回车键选择项目。按下回车后选择元素仍然是焦点。

如果按下回车键，如何将焦点移动到表单中的下一个元素？
如何用纯 JavaScript 替换 $('#' + id).remove() 以便删除 jQuery 依赖项？

【问题讨论】：

您可能还想添加您的 HTML 代码。使用纯 JS 删除： document.getElementById(id).remove();类似于 jquery。
表单包含简单的输入和选择元素。 Tab 键将焦点移动到下一个元素。如何在输入时按 Tab 键顺序将焦点设置到下一个元素？选择中的 Enter 键应类似于 Tab 键。 if (document.getElementById(id)) document.getElementById(id).remove(); 是否应该用于删除，因为在第一个调用元素中不存在？ Jquery 会自动处理这个问题。纯 javascript 是否需要为此使用 if ？
如果该元素可能不存在，最好使用if statement 以防止抛出任何错误。

标签： javascript html jquery

【解决方案1】：

很难猜出你要的是什么。

SO 上已经有多个建议和答案。

Enter key press behaves like a Tab in Javascript

document.addEventListener('keydown', function (e) {

  if (event.keyCode === 13 && event.target.nodeName == 'SELECT') {
    var form = event.target.closest('form');
    var index = Array.prototype.indexOf.call(form, event.target);
    form.elements[index + 1].focus();
    return false;
  }
});

<form>
<div id = "Customer">Customer</div>
<select>
<option value = "">Test</option>
<option value = "">Test</option>
</select>
<input type = "text">
<select>
<option value = "">Test</option>
<option value = "">Test</option>
</select>
<select>
<option value = "">Test</option>
<option value = "">Test</option>
</select>
<input type = "text">
</form>

【讨论】：

谢谢。这需要按两次回车：第一次回车关闭选择元素，只有第二次回车将焦点移动到下一个元素。如何解决这个问题，以便首先输入选择并将焦点移动到下一个元素。如果有帮助，可以使用其他元素或引导 5 组件代替 select。
将此作为单独的问题发布在stackoverflow.com/questions/70535719/…

【解决方案2】：

有两种纯 JavaScript 方法可以替换 jQuery 中的 $(...).remove() 函数。

解决方案一 - .remove() 函数。

let id = "";
// Find the element then remove it
document.getElementById(id).remove();

参考：

https://developer.mozilla.org/en-US/docs/Web/API/Element/remove

解决方案二 - 找到父节点然后使用.removeChild() 方法。

let id = "";
// Find the element mentioned
let element = document.getElementById(id);
// Find the elements parent node
let parent = element.parentNode;
// Remove the element from the parent
parent.removeChild(element);

参考：

https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild

【讨论】：

谢谢。伟大的。你能回答一下主要问题吗：如何在输入时将焦点移动到 tab 顺序上的下一个元素，就像按 tab 键一样。