如何在Javascript中将光标设置到输入框？

77

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

在上面的代码中，将窗体对象的值完美设置为，""但文本框中没有光标。我希望光标在那里。focus()仅聚焦于该输入框，但实际上未设置光标。

javascript dom-events

— 尤克·卡姆拉
source

1

document.getElementById(fieldID).focus();应该将闪烁的光标放在表单字段中，除非您有其他东西可以吸引页面焦点。您现在拥有.autofocus的语句不起作用

— mplungjan 2012年

1

.focus()确实设置了光标。这就是聚焦动作的全部含义。

— 暗影巫师为您耳边2012年

1

如果焦点不起作用，我会尝试click（）

— Oriesok Vlassky 2012年

2

未来的读者：还请确保您要定位的元素已添加到DOM中。我在脚本中创建元素，并在附加元素之前调用了focus（）。切换顺序对我来说解决了这个问题。

— 马修R.17年

103

在JavaScript中，首先关注控件，然后选择控件以在texbox上显示光标...

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

或使用jQuery

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

— 塔哈
source

11

不需要选择。他的代码还有其他问题。可能是嵌入式PDF或类似的文件

— mplungjan，2012年

1

我希望该光标应该在文本框中。我不应该在文本框中单击以输入值。

— yukti kamra 2012年

实际上，就我而言，选择使代码无效。您只需要focus（）;

— Greg Blass

56

我意识到这是一个非常古老的问题，但是对于类似的问题，我有一个“愚蠢”的解决方案，可能会对某人有所帮助。

我遇到了一个文本框出现同样的问题，该文本框显示为选中状态（通过JQuery中的Focus方法），但没有将光标插入。

事实是，我打开了“调试器”窗口以查看正在发生的事情，而那个窗口正在夺走焦点。该解决方案非常简单：只需关闭调试器即可，一切都很好...花费了1个小时进行测试！

— 奥里奥尼斯
source

我试图使一个<span>元素具有焦点，这最终成为问题（我滚动的消息很高兴通过了第一个被接受的答案）。我还发现默认情况下有些HTML元素无法聚焦（似乎是特定于浏览器的）。该<span>元素是这些元素之一，这就是为什么Chrome浏览器（版本57）将重点放在开发人员工具窗口上的原因。

— larrylampco

此评论节省了我几分钟而不是几个小时！

— user1503941

7

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

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

— 亚历山大·帕夫洛夫（Alexander Pavlov）
source

是的，这在过渡时是正确的。focus（）无法正常工作，您将必须使用$（“ element”）[0] .select（）来获取光标

— imal hasaranga perera 2015年

1

或el.setSelectionRange（el.value.length，el.value.length）; 使光标位于行的末尾。

— 矢量

注意：setSelectionRange<input type="number"/>

— 不适

2

如果您正在.onmousedown用作用户交互，那么可能会困扰您的事情之一；当您这样做时，然后立即尝试选择一个字段，则不会发生，因为鼠标被按住在其他位置上。因此，更改为.onmouseupand viola现在focus()可以工作，因为在尝试更改焦点时鼠标处于未单击状态。

— 芬吉尔兹
source

1

您没有提供足够的代码来帮助您提交表单并重新加载页面，或者页面上有一个对象（例如嵌入的PDF）占据了焦点。

这是验证表单的标准javascript方法。可以使用inubtrusive JS进行改进，它将删除内联脚本，但这是DEMO的起点

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
}

这是HTML

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

— mplungjan
source

1

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

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

— 节拍引擎
source

0

在我的经验中

document.getElementById（frmObj.id）.focus（）;

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

document.getElementById（frmObj.id）.select（）;

— 丹尼尔·弗拉特利
source