如何在Javascript中将光标设置为输入框？答案

【问题标题】：How to set cursor to input box in Javascript?如何在Javascript中将光标设置为输入框？
【发布时间】：2012-06-09 07:31:02
【问题描述】：

document.getElementById(frmObj.id).value="";
document.getElementById(frmObj.id).autofocus;
document.getElementById("errorMsg").innerHTML = "Only numeric value is allowed";

在上面的代码中，表单对象的值完美地设置为""，但文本框中没有光标。我想要一个光标在那里。 focus() 只关注那个输入框，并不实际设置光标。

【问题讨论】：

document.getElementById(fieldID).focus(); 应该将闪烁的光标放在表单字段中，除非您有其他东西可以抓住页面上的焦点。你现在拥有的带有 .autofocus 的语句什么都不做
.focus() 确实设置了光标。这就是焦点动作的全部含义。
如果焦点不起作用，我会尝试 click()
未来读者：还要确保您的目标元素已添加到 DOM。我在脚本中创建元素并在添加它们之前对它们调用 focus() 。切换顺序为我解决了这个问题。

标签： javascript dom-events

【解决方案1】：

有时您确实获得了焦点，但文本字段中没有光标。在这种情况下，您可以这样做：

document.getElementById(frmObj.id).select();

【讨论】：

是的，当有过渡时这是正确的
或 el.setSelectionRange(el.value.length, el.value.length);将光标置于行尾。
注意：setSelectionRange 不适用于 <input type="number"/>

【解决方案2】：

在JavaScript中先将焦点放在控件上然后选择控件显示光标在texbox上...

document.getElementById(frmObj.id).focus();
document.getElementById(frmObj.id).select();

或使用 jQuery

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

【讨论】：

不需要选择。他的代码还有其他事情发生。可能是嵌入式 PDF 或类似文件
我希望光标应该在文本框中。我不应该点击文本框输入值。
事实上，就我而言，选择使代码不起作用。你只想要focus();
每个都为我工作，焦点光标放置在输入的末尾，您可以从末尾开始书写，并保留其他字符。选择里面的值也会被选中。

【解决方案3】：

您没有提供足够的代码来提供帮助您可能会提交表单并重新加载页面，或者您在页面上有一个对象，例如窃取焦点的嵌入式 PDF。

这是验证表单的规范纯 JavaScript 方法可以使用 onubtrusive JS 来改进它，它将删除内联脚本，但这是起点：

function validate(formObj) {
  document.getElementById("errorMsg").innerHTML = "";
  var quantity = formObj.quantity;
  if (isNaN(quantity)) {
    quantity.value = "";
    quantity.focus();
    document.getElementById("errorMsg").innerHTML = "Only numeric value is allowed";
    return false;
  }
  return true; // allow submit
}

#errorMsg { color:red }

<form onsubmit="return validate(this)">
  <input type="text" name="quantity" value="" />
  <input type="submit" />
</form>
<span id="errorMsg"></span>

【讨论】：

【解决方案4】：

我意识到这是一个相当古老的问题，但我有一个类似问题的“愚蠢”解决方案，也许可以帮助某人。

我在显示为选中的文本框时遇到了同样的问题（通过 JQuery 中的 Focus 方法），但没有将光标移入。

事实上，我打开了 Debugger 窗口以查看正在发生的事情，而 THAT 窗口正在窃取焦点。解决方案非常简单：只需关闭 Debugger，一切都很好……花了 1 个小时进行测试！

【讨论】：

我试图使 <span> 元素成为焦点，这最终成为问题（很高兴我滚动通过了第一个接受的答案）。我还发现默认情况下有html elements that are not focusable（似乎是特定于浏览器的）。 <span> 元素就是其中之一，这就是 Chrome（第 57 版）将重点放在开发者工具窗口的原因。
这个 cmets 为我节省了几分钟而不是几个小时！

【解决方案5】：

如果您使用.onmousedown 作为您的用户交互，可能会咬到您的一件事；当您这样做，然后立即尝试选择一个字段时，它不会发生，因为鼠标被按住在其他东西上。因此，更改为 .onmouseup 和 viola，现在 focus() 可以正常工作，因为尝试更改焦点时鼠标处于未单击状态。

【讨论】：

我知道这是一个老问题，但这个答案绝对值得认可。找不到其他提到这一点的人。谢谢

【解决方案6】：

这种方式将焦点和光标设置到输入的末尾：

div.getElementsByTagName("input")[0].focus();
div.getElementsByTagName("input")[0].setSelectionRange(div.getElementsByTagName("input")[0].value.length,div.getElementsByTagName("input")[0].value.length,"forward");

【讨论】：

【解决方案7】：

根据我的经验

document.getElementById(frmObj.id).focus();

在 PC 上运行的浏览器上效果很好。但是在移动设备上，如果您希望显示键盘以便用户可以直接输入，那么您还需要：

document.getElementById(frmObj.id).select();

【讨论】：

【解决方案8】：

在输入标签内，您可以为任何使用 jsx/react 的人添加 autoFocus={true}。

<input
 type="email"
 name="email"
 onChange={e => setEmail(e.target.value)}
 value={email}
 placeholder={"Email..."}
 autoFocus={true}
/>

【讨论】：