尝试使用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()

如果输入字段只需要一个静态默认值，我通常用jQuery这样做:

$('#input').focus().val('Default value');

这似乎在所有浏览器中都有效。

我在IE中遇到了同样的问题(在通过RJS/prototype设置焦点后)。 当该字段已经有一个值时，Firefox已经在末尾留下了光标。IE将光标强制移到文本的开头。

我得出的解决方案如下:

<input id="search" type="text" value="mycurrtext" size="30" 
       onfocus="this.value = this.value;" name="search"/>

这在IE7和FF3中都有效，但在现代浏览器中不起作用(见评论)，因为没有指定UA必须覆盖这种情况下的值(根据元策略编辑)。

虽然我回答的太晚了，但对于以后的查询，这将是有帮助的。它也适用于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();
    }
}

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

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

我从这里得到了最好的答案，并创建了一个在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">