使用Jquery将焦点和光标设置到文本输入字段/字符串的末尾

Question

我有以下函数，将一个选择器作为高级选项添加到搜索输入框中，就像Stack Overflow的高级搜索一样。

当您单击要搜索的内容时，它会添加一个前缀。请参见下面的jQuery代码：

<script>
$(document).ready(function () {

        $("table#advanced_search_options tr").click(function () {
            var SearchSelection = $(this).children("td:last-of-type").html();
            var SearchInput = $('#Search');
            SearchInput.val(SearchInput.val() + SearchSelection);
            return false;
            alert(SearchSelection);
        });
});
</script>

我如何改变上面的代码，使焦点同时聚焦于 #search 输入框，并将光标放置在插入的文本/值的末尾？例如：HC: <-- 我添加到搜索输入框中的值，我想把光标设置在这里，就在冒号之后。

- Mark

Answer 1

你可以使用 Input.setSelectionRange 来实现此操作，它是与文本选择和文本光标交互的 Range API 的一部分。

var searchInput = $('#Search');

// Multiply by 2 to ensure the cursor always ends up at the end;
// Opera sometimes sees a carriage return as 2 characters.
var strLength = searchInput.val().length * 2;

searchInput.focus();
searchInput[0].setSelectionRange(strLength, strLength);

演示：Fiddle

- palaѕн

---

以防万一: if (newEl.attr('type') != 'number') {} 会防止您尝试在不支持设置插入符的输入类型上设置插入符。 - fboes

请查看这个分支：http://jsfiddle.net/msLkp1gt/1/，我希望用户首先关注第一个，当他们使用Tab键转到第二个时，光标应该移到末尾。 - Akshay

你应该将值的长度乘以2，因为Opera有时会将回车视为2个字符。因此每次选定的文本不总是在结尾处。 - Brad Bird

这对我没用！我将它包装在 setTimeout(function() { //code }, 0); 中。 - Derk Jan Speelman

正如@DerkJanSpeelman所提到的，对于我来说，它必须被包装在一个0毫秒的setTimeout中。 - Prashant