我从这里得到了最好的答案，并创建了一个在Chrome中工作良好的功能。

您需要将逻辑封装在一个超时中，因为您必须等待焦点完成后才能访问所选内容 要将光标放在末尾，选择起始点需要放在末尾 为了滚动到输入字段的末尾，scrollLeft需要匹配scrollWidth

/** * Upon focus, set the cursor to the end of the text input * @param {HTMLInputElement} inputEl - An HTML <input> element */ const setFocusEnd = (inputEl) => { setTimeout(() => { const { scrollWidth, value: { length } } = inputEl; inputEl.setSelectionRange(length, length); inputEl.scrollLeft = scrollWidth; }, 0); }; document .querySelector('input') .addEventListener('focus', (e) => setFocusEnd(e.target)); html, body { width: 100%; height: 100%; margin: 0; } body { display: flex; flex-direction: column; justify-content: center; align-items: center; } input:focus { background-color: hsla(240, 100%, 95%, 1.0); } <input type="text" placeholder="Search..." value="This is some really, really long text">

下面是我的答案的jsFiddle演示。演示使用CoffeeScript，但如果需要，可以将其转换为纯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;
}

有一种简单的方法可以让它在大多数浏览器中工作。

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在有空格时，会错误地计算长度。为此，你可以使用一个巨大的数字，应该大于你的字符串。

设置光标时，点击文本区域的文本结束… 这段代码的变体是…也工作!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();
 }

While this may be an old question with lots of answers, I ran across a similar issue and none of the answers were quite what I wanted and/or were poorly explained. The issue with selectionStart and selectionEnd properties is that they don't exist for input type number (while the question was asked for text type, I reckon it might help others who might have other input types that they need to focus). So if you don't know whether the input type the function will focus is a type number or not, you cannot use that solution.

跨浏览器和所有输入类型的解决方案相当简单:

获取输入值并将其存储在变量中 关注输入 将输入值设置为存储值

这样，光标就位于输入元素的末尾。 所以你所要做的就是这样(使用jquery，提供一个人希望关注的元素选择器是通过点击元素的“data-focus-element”数据属性和函数在点击后执行)。foo的元素):

$('.foo').click(function() {
    element_selector = $(this).attr('data-focus-element');
    $focus = $(element_selector);
    value = $focus.val();
    $focus.focus();
    $focus.val(value);
});

Why does this work? Simply, when the .focus() is called, the focus will be added to the beginning of the input element (which is the core problem here), ignoring the fact, that the input element already has a value in it. However, when the value of an input is changed, the cursor is automatically placed at the end of the value inside input element. So if you override the value with the same value that had been previously entered in the input, the value will look untouched, the cursor will, however, move to the end.

试试这个，它对我很有效:

//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中不会改变。