如何动态移除围绕文本输入的焦点答案

【问题标题】：How to remove focus around text input dynamically如何动态移除围绕文本输入的焦点
【发布时间】：2020-09-17 06:25:27
【问题描述】：

我有这个 HTML 页面：

我想要做的是，删除我的文本输入周围的黑色边框。但由于我的“待办事项”列表是动态创建的（页面加载时为空），我想使用我的 JavaScript 文件删除边框。

我该怎么做？

【问题讨论】：

动态与否，您应该能够使用纯 css 移除焦点发光。喜欢input { outline: none; }
使用outline:none
但我必须小心这样做！对于可访问性和尝试使用键盘而不是鼠标来导航网页，焦点非常重要。如果你不知道哪个元素有焦点，你就不知道按下一个键或回车会发生什么！
这能回答你的问题吗？ How to remove focus around buttons on click
@DhruvErry “光标闪烁（以及用户在那里打字）还不够吗？” 如果他们看不到，那就不行了 :) 可访问性和键盘导航对于盲人和弱视者。

【解决方案1】：

您可以尝试使用document.getElementById("input'sID").style.outline = "none"; 或document.querySelector("input").style.outline="none"；这将通过javascript将包含特定ID的输入框的outline属性设置为none。或者即使输入类型动态呈现也不会影响，您可以在 css 中设置input{ outline: none}，它将适用于您页面上动态呈现的所有输入类型。

【讨论】：

感谢@Ritika，我简单地将样式添加到我的输入标签中，它可以完美运行

【解决方案2】：

当您创建此 input 字段时，只需确保将 autofocus 属性设置为 false 或不添加即可。

你也可以像这样取消它（即使默认是false）：

document.getElementById("id_Of_The_Element").autofocus = false;

【讨论】：