CODEWITHSUNDEEP
javascriptjqueryhtml
k102
k102

Reputation: 8079

How do I change textarea value and put cusor at the beginnig?

This is the code:

<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>

After the button is pressed, textarea value is changing and it's focused. But the cursor is at the end of the text. How do I move it to the beginning of this textarea after its value has been changed?

UPD: @San's approach works well in Chrome, I still need a solution for FF

UPD2: The above code is working now (one should use $('.texta')[0] instead of $('.texta'))

Upvotes: 1

Views: 108

Answers (3)

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

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();
        }
    });
};

Upvotes: 2

San
San

Reputation: 624

You may try this

<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>

Upvotes: 4

Amit
Amit

Reputation: 15387

You can achieve as below

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

Upvotes: 3

Related Questions