什么是最好的方法(我假设最简单的方法),以放置光标在文本的输入文本元素的末尾通过JavaScript -焦点已设置到元素?
当前回答
我喜欢接受的答案很多,但它停止工作在Chrome。在Chrome浏览器中,光标要走到最后,需要改变输入值。解决方法如下:
<input id="search" type="text" value="mycurrtext" size="30"
onfocus="var value = this.value; this.value = null; this.value = value;" name="search"/>
其他回答
如果先设置值,再设置焦点,光标将始终出现在最后。
$("#search-button").click(function (event) {
event.preventDefault();
$('#textbox').val('this');
$("#textbox").focus();
return false;
});
这是用来测试的小提琴 https://jsfiddle.net/5on50caf/1/
现在是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> .
在这之后,我发现最好的方法是使用setSelectionRange函数,如果浏览器支持它;如果不是,则恢复使用Mike Berrow回答中的方法(即将值替换为本身)。
我还将scrollTop设置为一个高值,以防我们在一个垂直滚动的文本区域。(在Firefox和Chrome中,使用任意的高值似乎比$(this).height()更可靠。)
我已经把它作为一个jQuery插件。(如果你没有使用jQuery,我相信你仍然可以很容易地得到主旨。)
我在IE6, IE7, IE8, Firefox 3.5.5,谷歌Chrome 3.0, Safari 4.0.4, Opera 10.00中进行了测试。
它可以在jquery网站上作为PutCursorAtEnd插件使用。为方便起见,1.0版的代码如下:
// jQuery plugin: PutCursorAtEnd 1.0
// http://plugins.jquery.com/project/PutCursorAtEnd
// by teedyay
//
// Puts the cursor at the end of a textbox/ textarea
// codesnippet: 691e18b1-f4f9-41b4-8fe8-bc8ee51b48d4
(function($)
{
jQuery.fn.putCursorAtEnd = function()
{
return this.each(function()
{
$(this).focus()
// If this function exists...
if (this.setSelectionRange)
{
// ... then use it
// (Doesn't work in IE)
// Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.
var len = $(this).val().length * 2;
this.setSelectionRange(len, len);
}
else
{
// ... otherwise replace the contents with itself
// (Doesn't work in Google Chrome)
$(this).val($(this).val());
}
// Scroll to the bottom, in case we're in a tall textarea
// (Necessary for Firefox and Google Chrome)
this.scrollTop = 999999;
});
};
})(jQuery);
试试下面的代码:
$('input').focus(function () {
$(this).val($(this).val());
}).focus()
document.querySelector(“输入”)。addEventListener('focus', e => { Const {value} = e.target; e.target.setSelectionRange(价值。长度,value.length); }); <input value="my text" />