jquery - 如何在jquery中使用焦点？

Question

我有一个脚本，我可以在其中单击 div 并将信息添加到 textarea。这是可行的，但是光标始终位于我插入的信息的开头。

<div id="click">Click to insert</div>
<textarea id="info">I want to</textarea>

这是jQuery：

<script>
    $(document).ready(function(){
        $('#click').on('click',function(){
            var i=$('#info').val();
            var n="Insert this";//information to be inserted
            $('#info').val(i + n).focus();
        });
    });
</script>

现在整个事情应该是我想插入这个，然后是光标。相反，光标像这样在中间，我想 [cursor] 插入 this。有什么方法可以让光标聚焦在字段内容的末尾？

Answer 1

试试这个 JSFiddle http://jsfiddle.net/adiioo7/2D9Td/ :-

$(document).ready(function () {
    $('#click').on('click', function () {
        var i = $('#info').val();
        var n = "Insert this"; //information to be inserted
        $('#info').focus().val(i + n);
    });
});

只是在最后一次 js 调用中更改了 focus 和 val 的顺序。

Answer 2

jQuery插件怎么样？

$.fn.setCaretToEnd = function () {
    return this.each(function () {
        if (this.setSelectionRange) {
            this.focus();
            this.setSelectionRange(this.value.length, this.value.length);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            range.moveEnd('character', this.value.length);
            range.moveStart('character', this.value.length);
            range.select();
        }
    });
};

$(document).ready(function () {
    $('#click').on('click', function () {
        var i = $('#info').val();
        var n = "Insert this";

        $('#info').val(i + n).focus().setCaretToEnd();
    });
});

小提琴