Javascript 如何在Javascript中将光标设置为输入框?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10894638/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 03:28:29  来源:igfitidea点击:

How to set cursor to input box in Javascript?

javascriptdom-events

提问by yukti kamra

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

In the above code the value of the form object is perfectly setting to ""but there is no cursor in the text box. I want a cursor to be there. focus()only focuses that input box but does not actually set the cursor.

在上面的代码中,表单对象的值完美设置为,""但文本框中没有光标。我想要一个光标在那里。focus()仅聚焦该输入框,但实际上并未设置光标。

回答by Talha

In JavaScriptfirst focus on the control and then select the control to display the cursor on texbox...

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

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

or by using jQuery

或使用jQuery

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

回答by Orionis

I realize that this is quite and old question, but I have a 'stupid' solution to a similar problem which maybe could help someone.

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

I experienced the same problem with a text box which shown as selected (by the Focus method in JQuery), but did not take the cursor in.

我遇到了与显示为选中状态的文本框相同的问题(通过 JQuery 中的 Focus 方法),但没有将光标移入。

The fact is that I had the Debugger window open to see what is happening and THATwindow was stealing the focus. The solution is banally simple: just close the Debugger and everything is fine...1 hour spent in testing!

事实是,我打开了调试器窗口以查看正在发生的事情,而那个窗口正在窃取焦点。解决方案非常简单:只需关闭调试器,一切都很好......测试花费了 1 小时!

回答by Alexander Pavlov

Sometimes you do get focus but no cursor in a text field. In this case you would do this:

有时您确实获得了焦点,但文本字段中没有光标。在这种情况下,你会这样做:

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

回答by fyngyrz

One of the things that can bite you is if you are using .onmousedownas your user interaction; when you do that, and then an attempt is immediately made to select a field, it won't happen, because the mouse is being held down on something else. So change to .onmouseupand viola, now focus()works, because the mouse is in an un-clicked state when the attempt to change focus is made.

可以咬你的一件事是,如果你正在使用.onmousedown你的用户交互;当你这样做时,然后立即尝试选择一个字段,它不会发生,因为鼠标被按住在别的东西上。所以更改为.onmouseup和中提琴,现在focus()可以工作,因为当尝试更改焦点时,鼠标处于未单击状态。

回答by mplungjan

You have not provided enough code to help You likely submit the form and reload the page OR you have an object on the page like an embedded PDF that steals the focus.

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

Here is the canonical plain javascript method of validating a form It can be improved with onubtrusive JS which will remove the inline script, but this is the starting point DEMO

这是验证表单的规范纯 javascript 方法 可以使用 onubtrusive 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
}   

Here is the HTML

这是 HTML

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

回答by BeatEngine

This way sets the focus and cursor to the end of your input:

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

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