将焦点设置为元素之后，将光标放在输入文本元素中的文本末尾的最佳方式（我假设最简单的方法）是什么？
答案 0 :(得分：169)
有一种简单的方法可以让它在大多数浏览器中运行。
this.selectionStart = this.selectionEnd = this.value.length;
然而，由于一些浏览器的怪癖，更具包容性的答案看起来更像是
setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);
使用jQuery （设置监听器，但不是必须的）
$('#el').focus(function(){
var that = this;
setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='el' type='text' value='put cursor at end'>
使用Vanilla JS （从this answer借用addEvent函数）
// Basic cross browser addEvent
function addEvent(elem, event, fn){
if(elem.addEventListener){
elem.addEventListener(event, fn, false);
}else{
elem.attachEvent("on" + event,
function(){ return(fn.call(elem, window.event)); });
}}
var element = document.getElementById('el');
addEvent(element,'focus',function(){
var that = this;
setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);
});<input id='el' type='text' value='put cursor at end'>
Chrome有一个奇怪的怪癖，焦点事件会在光标移动到字段之前触发;这解决了我的简单解决方案。有两种方法可以解决这个问题：
focus更改为mouseup。这对用户来说非常烦人，除非你仍然跟踪焦点。我并不是真的爱上这两种选择。另外，@ vladkras指出，Opera的某些旧版本在有空格时会错误地计算长度。为此，您可以使用一个应该大于字符串的大数字。
答案 1 :(得分：164)
我在IE中面临同样的问题（在通过RJS /原型设置焦点之后）。 当已经存在该字段的值时，Firefox已经将光标留在最后。 IE正在强制光标到文本的开头。
我到达的解决方案如下：
<input id="search" type="text" value="mycurrtext" size="30"
onfocus="this.value = this.value;" name="search"/>
这适用于IE7和FF3
答案 2 :(得分：141)
试试这个，它对我有用：
//input is the input element
input.focus(); //sets focus to element
var val = this.input.value; //store the value of the element
this.input.value = ''; //clear the value of the element
this.input.value = val; //set that value back.
要使光标移动到最后，输入必须先聚焦，然后当值改变时，它将转到结尾。如果将.value设置为相同，则不会更改chrome。
答案 3 :(得分：96)
在对此进行黑客攻击之后，我发现最好的方法是使用setSelectionRange函数，如果浏览器支持它;如果没有，请回复使用Mike Berrow的答案中的方法（即将值替换为自身）。
如果我们处于可垂直滚动的scrollTop，我也会将textarea设置为较高的值。 （在Firefox和Chrome中，使用任意高值似乎比$(this).height()更可靠。）
我已经把它作为一个jQuery插件。 （如果你没有使用jQuery，我相信你仍然可以轻松地获得要点。）
我已经在IE6，IE7，IE8，Firefox 3.5.5，谷歌Chrome 3.0，Safari 4.0.4，Opera 10.00中进行了测试。
它可以在jquery.com上以PutCursorAtEnd plugin的形式获得。为方便起见，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);
答案 4 :(得分：19)
<script type="text/javascript">
function SetEnd(txt) {
if (txt.createTextRange) {
//IE
var FieldRange = txt.createTextRange();
FieldRange.moveStart('character', txt.value.length);
FieldRange.collapse();
FieldRange.select();
}
else {
//Firefox and Opera
txt.focus();
var length = txt.value.length;
txt.setSelectionRange(length, length);
}
}
</script>
此功能适用于IE9，Firefox 6.x和Opera 11.x
答案 5 :(得分：15)
我在chrome
中取得了相当大的成功$("input.focus").focus(function () {
var val = this.value,
$this = $(this);
$this.val("");
setTimeout(function () {
$this.val(val);
}, 1);
});
快速破解：
它将每个输入字段与类焦点放在一起，然后将输入字段的旧值存储在变量中，之后将空字符串应用于输入字段。
然后它等待1毫秒并再次输入旧值。
答案 6 :(得分：7)
简单。编辑或更改值时，首先放置焦点然后设置值。
$("#catg_name").focus();
$("#catg_name").val(catg_name);
答案 7 :(得分：6)
仍然需要中间变量，（参见var val =） 否则光标表现得很奇怪，我们最后需要它。
<body onload="document.getElementById('userinput').focus();">
<form>
<input id="userinput" onfocus="var val=this.value; this.value=''; this.value= val;"
class=large type="text" size="10" maxlength="50" value="beans" name="myinput">
</form>
</body>
答案 8 :(得分：5)
适用于所有情况的所有浏览器：
function moveCursorToEnd(el) {
window.setTimeout(function () {
if (typeof el.selectionStart == "number") {
el.selectionStart = el.selectionEnd = el.value.length;
} else if (typeof el.createTextRange != "undefined") {
var range = el.createTextRange();
range.collapse(false);
range.select();
}
}, 1);
}
如果您需要从onFocus事件处理程序移动光标
，则需要超时答案 9 :(得分：4)
尝试使用此版本与Vanilla JavaScript结合使用。
<input type="text" id="yourId" onfocus=" let value = this.value; this.value = null; this.value=value" name="nameYouWant" class="yourClass" value="yourValue" placeholder="yourPlaceholder...">
在Js
document.getElementById("yourId").focus()
答案 10 :(得分：3)
在jQuery中，那是
$(document).ready(function () {
$('input').focus(function () {
$(this).attr('value',$(this).attr('value'));
}
}
答案 11 :(得分：2)
采取一些答案..制作单行jquery。
$('#search').focus().val($('#search').val());
答案 12 :(得分：2)
这个问题很有意思。关于它最令人困惑的是，我找不到任何解决方案完全解决了这个问题。
+++++++解决方案++++++++++++++
你需要一个JS函数，如下所示：
function moveCursorToEnd(obj) {
if (!(obj.updating)) {
obj.updating = true;
var oldValue = obj.value;
obj.value = '';
setTimeout(function(){ obj.value = oldValue; obj.updating = false; }, 100);
}
}
你需要在onfocus和onclick事件中调用这个人。
<input type="text" value="Test Field" onfocus="moveCursorToEnd(this)" onclick="moveCursorToEnd(this)">
它适用于所有设备浏览器!!!!
答案 13 :(得分：1)
注意 focus() 在最后，这是为了 textarea 长文本兼容性。
const end = input.value.length
input.setSelectionRange(end, end)
input.focus()
答案 14 :(得分：1)
results = soup.find('section', class_='manga').text
document.querySelector('input').addEventListener('focus', e => {
const { value } = e.target;
e.target.setSelectionRange(value.length, value.length);
});答案 15 :(得分：1)
现在是2019年，以上方法都不适合我，但确实适用于https://css-tricks.com/snippets/javascript/move-cursor-to-end-of-input/
function moveCursorToEnd(id) {
var el = document.getElementById(id)
el.focus()
if (typeof el.selectionStart == "number") {
el.selectionStart = el.selectionEnd = el.value.length;
} else if (typeof el.createTextRange != "undefined") {
var range = el.createTextRange();
range.collapse(false);
range.select();
}
}<input id="myinput" type="text" />
<a href="#" onclick="moveCursorToEnd('myinput')">Move cursor to end</a>
答案 16 :(得分：1)
虽然这可能是一个有很多答案的老问题，但我遇到了类似的问题，没有一个答案是我想要的和/或解释得很差。 selectionStart和selectionEnd属性的问题在于它们不存在输入类型编号（当问题是文本类型时，我认为它可能会帮助其他可能需要关注的其他输入类型的人）。因此，如果您不知道函数将关注的输入类型是否为类型编号，则无法使用该解决方案。
跨浏览器和所有输入类型的解决方案非常简单：
这样光标位于输入元素的末尾。
所以你所做的就是这样的事情（使用jquery，假设一个人希望聚焦的元素选择器可以通过被点击的元素的＆data-focus-element＆＃39;数据属性访问，并且函数执行点击＆＃39; .foo＆＃39;元素后：
$('.foo').click(function() {
element_selector = $(this).attr('data-focus-element');
$focus = $(element_selector);
value = $focus.val();
$focus.focus();
$focus.val(value);
});
为什么这样做？简单地说，当调用.focus（）时，焦点将被添加到input元素的开头（这是这里的核心问题），忽略了输入元素已经有一个值的事实。但是，当输入的值发生变化时，光标会自动放在input元素内的值的末尾。因此，如果使用先前在输入中输入的相同值覆盖该值，则该值将不会受到影响，但光标将移至末尾。
答案 17 :(得分：1)
var valsrch = $('#search').val();
$('#search').val('').focus().val(valsrch);
答案 18 :(得分：1)
如果输入字段只需要一个静态默认值，我通常使用jQuery执行此操作：
$('#input').focus().val('Default value');
这似乎适用于所有浏览器。
答案 19 :(得分：1)
我刚刚发现在iOS中，设置textarea.textContent属性会将光标放在textarea元素中文本的末尾。这个行为是我的应用程序中的一个错误，但似乎是你可以故意使用的东西。
答案 20 :(得分：0)
如果先设置值然后设置焦点，光标将始终显示在最后。
$("#search-button").click(function (event) {
event.preventDefault();
$('#textbox').val('this');
$("#textbox").focus();
return false;
});
这是测试的小提琴 https://jsfiddle.net/5on50caf/1/
答案 21 :(得分：0)
我非常喜欢接受的答案，但它在Chrome中停止了工作。在Chrome中，要使光标移至最后，输入值需要更改。解决方案如下：
<input id="search" type="text" value="mycurrtext" size="30"
onfocus="var value = this.value; this.value = null; this.value = value;" name="search"/>
答案 22 :(得分：0)
我想将光标放在contenteditable = true的“ div”元素的末尾，并且得到了Xeoncross code的解决方案：
<input type="button" value="Paste HTML" onclick="document.getElementById('test').focus(); pasteHtmlAtCaret('<b>INSERTED</b>'); ">
<div id="test" contenteditable="true">
Here is some nice text
</div>
此功能具有不可思议的作用：
function pasteHtmlAtCaret(html) {
var sel, range;
if (window.getSelection) {
// IE9 and non-IE
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
// Range.createContextualFragment() would be useful here but is
// non-standard and not supported in all browsers (IE9, for one)
var el = document.createElement("div");
el.innerHTML = html;
var frag = document.createDocumentFragment(), node, lastNode;
while ( (node = el.firstChild) ) {
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
// Preserve the selection
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
} else if (document.selection && document.selection.type != "Control") {
// IE < 9
document.selection.createRange().pasteHTML(html);
}
}
对于大多数浏览器来说效果很好，请检查一下，此代码将文本放在div元素（而非输入元素）中并将焦点放在文本的末尾
https://jsfiddle.net/Xeoncross/4tUDk/
感谢Xeoncross
答案 23 :(得分：0)
我也面临着同样的问题。终于这对我有用：
jQuery.fn.putCursorAtEnd = = function() {
return this.each(function() {
// Cache references
var $el = $(this),
el = this;
// Only focus if input isn't already
if (!$el.is(":focus")) {
$el.focus();
}
// If this function exists... (IE 9+)
if (el.setSelectionRange) {
// Double the length because Opera is inconsistent about whether a carriage return is one character or two.
var len = $el.val().length * 2;
// Timeout seems to be required for Blink
setTimeout(function() {
el.setSelectionRange(len, len);
}, 1);
} else {
// As a fallback, replace the contents with itself
// Doesn't work in Chrome, but Chrome supports setSelectionRange
$el.val($el.val());
}
// Scroll to the bottom, in case we're in a tall textarea
// (Necessary for Firefox and Chrome)
this.scrollTop = 999999;
});
};
这是我们可以这样称呼的：
var searchInput = $("#searchInputOrTextarea");
searchInput
.putCursorAtEnd() // should be chainable
.on("focus", function() { // could be on any event
searchInput.putCursorAtEnd()
});
它适用于我在Safari，IE，Chrome，Mozilla中的应用。在移动设备上，我没有尝试过。
答案 24 :(得分：0)
//fn setCurPosition
$.fn.setCurPosition = function(pos) {
this.focus();
this.each(function(index, elem) {
if (elem.setSelectionRange) {
elem.setSelectionRange(pos, pos);
} else if (elem.createTextRange) {
var range = elem.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
});
return this;
};
// USAGE - Set Cursor ends
$('#str1').setCurPosition($('#str1').val().length);
// USAGE - Set Cursor at 7 position
// $('#str2').setCurPosition(7);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Set cursor at any position</p>
<p><input type="text" id="str1" value="my string here" /></p>
<p><input type="text" id="str2" value="my string here" /></p>
答案 25 :(得分：0)
macId=11:22:33:44:55:66
ssh YOUR-DEVICE /ip arp print where mac-address=${macId} | awk "/${macId}/"'{ print $3 }'
https://codesandbox.io/s/peaceful-bash-x2mti
此方法更新HTMLInputElement.selectionStart，selectionEnd， 和一次调用中的selectionDirection属性。
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
在其他js方法中，el.setSelectionRange(-1, -1);通常表示最后一个字符。也是这种情况，但是我在文档中找不到明确提及这种行为的地方。
答案 26 :(得分：0)
超级简单（您可能需要专注于输入元素）
inputEl = getElementById('inputId');
var temp = inputEl.value;
inputEl.value = '';
inputEl.value = temp;
答案 27 :(得分：0)
单击文本区域到文本末尾时设置光标... 这段代码的变化是......也可以！适用于Firefox，IE，Safari，Chrome ..
在服务器端代码中：
txtAddNoteMessage.Attributes.Add("onClick", "sendCursorToEnd('" & txtAddNoteMessage.ClientID & "');")
在Javascript中：
function sendCursorToEnd(obj) {
var value = $(obj).val(); //store the value of the element
var message = "";
if (value != "") {
message = value + "\n";
};
$(obj).focus().val(message);
$(obj).unbind();
}
答案 28 :(得分：-1)
请尝试以下代码：
$('input').focus(function () {
$(this).val($(this).val());
}).focus()
答案 29 :(得分：-1)
这是我的答案jsFiddle demo。该演示使用CoffeeScript，但如果需要，您可以convert it to plain JavaScript。
重要的部分，在JavaScript中：
var endIndex = textField.value.length;
if (textField.setSelectionRange) {
textField.setSelectionRange(endIndex, endIndex);
}
我发布这个答案是因为我已经为其他有同样问题的人写了这个答案。这个答案并没有涵盖这里最常见答案的边缘情况，但它对我有用，并且有一个你可以玩的jsFiddle演示。
这是来自jsFiddle的代码，所以即使jsFiddle消失，这个答案也会被保留：
moveCursorToEnd = (textField) ->
endIndex = textField.value.length
if textField.setSelectionRange
textField.setSelectionRange(endIndex, endIndex)
jQuery ->
$('.that-field').on 'click', ->
moveCursorToEnd(this)
<div class="field">
<label for="pressure">Blood pressure</label>:
<input class="that-field" type="text" name="pressure" id="pressure" value="24">
</div>
<p>
Try clicking in the text field. The cursor will always jump to the end.
</p>
body {
margin: 1em;
}
.field {
margin-bottom: 1em;
}
答案 30 :(得分：-1)
尽管我回答得太迟了，但是对于将来的查询，这将是有帮助的。它也可以在contenteditable分区中使用。
您需要从何处设置焦点；编写这段代码-
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();
}
}
答案 31 :(得分：-1)
我之前尝试过这些建议，但没有一个适合我（在Chrome中测试过），所以我编写了自己的代码 - 它在Firefox，IE，Safari，Chrome中运行良好......
在Textarea：
onfocus() = sendCursorToEnd(this);
在Javascript中：
function sendCursorToEnd(obj) {
var value = obj.value; //store the value of the element
var message = "";
if (value != "") {
message = value + "\n";
};
$(obj).focus().val(message);}
答案 32 :(得分：-2)
好吧，我只是用：
$("#myElement").val($("#myElement").val());
答案 33 :(得分：-2)
input = $('input');
input.focus().val(input.val()+'.');
if (input.val()) {input.attr('value', input.val().substr(0,input.val().length-1));}