什么是最好的方法(我假设最简单的方法),以放置光标在文本的输入文本元素的末尾通过JavaScript -焦点已设置到元素?
当前回答
如果先设置值,再设置焦点,光标将始终出现在最后。
$("#search-button").click(function (event) {
event.preventDefault();
$('#textbox').val('this');
$("#textbox").focus();
return false;
});
这是用来测试的小提琴 https://jsfiddle.net/5on50caf/1/
其他回答
虽然我回答的太晚了,但对于以后的查询,这将是有帮助的。它也适用于contentteditable div。
从你需要在最后设置焦点的地方;写这段代码-
var el = document.getElementById("your_element_id");
placeCaretAtEnd(el);
函数是-
function placeCaretAtEnd(el) {
el.focus();
if (typeof window.getSelection != "undefined"
&& typeof document.createRange != "undefined") {
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(false);
textRange.select();
}
}
如果输入字段只需要一个静态默认值,我通常用jQuery这样做:
$('#input').focus().val('Default value');
这似乎在所有浏览器中都有效。
有一种简单的方法可以让它在大多数浏览器中工作。
this.selectionStart = this.selectionEnd = this.value.length;
然而,由于一些浏览器的特性,一个更全面的答案是这样的
setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);
使用jQuery(设置监听器,否则不需要)
$ (' # el) .focus(函数(){ Var that = this; () {setTimeout(函数。selectionStart = that。selectionEnd = 10000;},0); }); < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> <input id='el' type='text' value='put cursor at end'>
使用Vanilla JS(从答案中借用addEvent函数)
//基本的跨浏览器addEvent 函数addEvent(elem,事件,fn){ 如果(elem.addEventListener) { 初步的。addEventListener(事件,fn, false); 其他}{ 初步的。attachEvent(“on”+事件, 函数(){返回(fn。调用(elem window.event));}); }} var element = document.getElementById('el'); addEvent(元素、“焦点”函数(){ Var that = this; () {setTimeout(函数。selectionStart = that。selectionEnd = 10000;},0); }); <input id='el' type='text' value='put cursor at end'>
怪癖
Chrome有一个奇怪的怪癖,焦点事件在光标移动到字段之前被触发;这打乱了我简单的解决方案。有两个选项可以解决这个问题:
您可以添加一个0毫秒的超时(将操作延迟到堆栈清空为止) 您可以将事件从焦点更改为鼠标悬停。这对用户来说是相当烦人的,除非你仍然保持焦点。这两种选择我都不太喜欢。
此外,@vladkras指出,一些旧版本的Opera在有空格时,会错误地计算长度。为此,你可以使用一个巨大的数字,应该大于你的字符串。
我在IE中遇到了同样的问题(在通过RJS/prototype设置焦点后)。 当该字段已经有一个值时,Firefox已经在末尾留下了光标。IE将光标强制移到文本的开头。
我得出的解决方案如下:
<input id="search" type="text" value="mycurrtext" size="30"
onfocus="this.value = this.value;" name="search"/>
这在IE7和FF3中都有效,但在现代浏览器中不起作用(见评论),因为没有指定UA必须覆盖这种情况下的值(根据元策略编辑)。
现在是2019年,上面的方法对我来说都没用,但这个方法管用,摘自https://css-tricks.com/snippets/javascript/move-cursor-to-end-of-input/
函数moveCursorToEnd(id) var el = document.getElementById(id) el.focus () If(类型的el。selectionStart == "number") { 埃尔。selectionStart = el。selectionEnd = el.value.length; } else if(类型的el。createTextRange != "undefined") { var range = el.createTextRange(); range.collapse(假); range.select (); } } <input id="myinput" type="text" /> <a href="#" onclick="moveCursorToEnd('myinput')>移动光标到结束</a> .