Question

这是代码：

<html>

<head>
    <script src="jquery-2.0.0.js" type="text/javascript"></script>
    <script>
        function testfn () {
            $('.texta').html('stuff');

            if ($('.texta')[0].createTextRange) {
                var part = $('.texta')[0].createTextRange();
                part.move("character", 0);
                part.select();
            } else if ($('.texta')[0].setSelectionRange) {
                $('.texta')[0].setSelectionRange(0, 0);
            }
            $('.texta').focus();

        }
    </script>
</head>
<body>
<textarea class="texta"></textarea>
<button onclick="testfn();">test</button>
</body>
</html>

按下按钮后，textarea值正在改变并且聚焦。但光标位于文本的末尾。如何在更改其值后将其移动到此textarea的开头？

UPD： @ San的方法在Chrome中运行良好，我仍然需要FF的解决方案

UPD2 ：以上代码现在正在运行（一个应使用$('.texta')[0]代替$('.texta')）

Answer 1

你可以试试这个

<script src="jquery-2.0.0.js" type="text/javascript"></script>
    <script>
        function testfn () {
            $('.texta').html('stuff');

           if ($('.texta').createTextRange) {
            var part = $('.texta').createTextRange();
            part.move("character", 0);
            part.select();
            }else if ($('.texta').setSelectionRange){
            $('.texta').setSelectionRange(0, 0);}
            $('.texta').focus();

        }
    </script>

Answer 2

您可以实现以下

JS

$(function(){
    $("#Test").click(function(){

        $('.texta').focus();
            $('.texta').val('stuff');
        $('.texta').selectRange(0,0);
    });
});

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

HTML

<textarea class="texta"></textarea>
<input type="button" id="Test" onClick="testfn();" value="test"></input>

DEMO

Answer 3

DEMO

<强> HTML

<textarea class="texta"></textarea>
<button id="test">test</button>

<强> JS

$('#test').click(function () {
    var text = $('.texta');
    text.focus().val('stuff').selectRange(0,0);
});
$.fn.selectRange = function(start, end) {
    if(!end) end = start; 
    return this.each(function() {
        if (this.setSelectionRange) {
            this.focus();
            this.setSelectionRange(start, end);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    });
};

如何更改textarea值并将光标放在开头？

3 个答案: