Find position of cursor in textarea

Question

Why isn't this code working?

http://sandbox.phpcode.eu/g/5db40.php

<form>
   <textarea></textarea>
</form>
<script>
$(function(){
    $("textarea").keydown(function(e){
        if (e.keyCode == 9){

                     $("textarea").selectionStart.append("    ");
                     e.preventDefault();
        }
    });
});
</script>

You have to press TAB on textarea

Problem is that it doesn't do/append four spaces and it does default browser action (switch to adress tab in Chrome)

Thoughts?

Observation: even Stack Overflow's `textarea`s, which generally contain code that is indented, don't allow tabs. — Devin Burke, Aug 05 '11 at 17:46
possible duplicate of [Capturing TAB key in text box](http://stackoverflow.com/questions/3362/capturing-tab-key-in-text-box) — Marc B, Aug 05 '11 at 17:48
@genesis: I don't know exactly. I haven't tried to do it myself. But my comment was suggesting that maybe it isn't feasible. — Devin Burke, Aug 05 '11 at 17:52

score 3 · Accepted Answer · edited May 23 '17 at 12:23

3

Related to this question, try:

$(function () {
    $("textarea").keydown(function (e) {
        if (e.keyCode == 9) {
            e.preventDefault();
            var $this = $(this);
            var pos = $this[0].selectionStart;
            $this.val($this.val().substring(0, pos) + "    " + $this.val().substring(pos));
            $this.setCursorPosition(pos + 4);
        }
    });
});

And add the JQuery from this post.

new function($) {
  $.fn.setCursorPosition = function(pos) {
    if ($(this).get(0).setSelectionRange) {
      $(this).get(0).setSelectionRange(pos, pos);
    } else if ($(this).get(0).createTextRange) {
      var range = $(this).get(0).createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  }
}(jQuery);

edited May 23 '17 at 12:23

Community

1
1

answered Aug 05 '11 at 17:47

Jay

6,224
4
20
23

Thats probably because `append` is not a javascript string function. Try the old `string = string + 'extra stuff';` approach. – Jay Aug 05 '11 at 17:59
but this appends these spaces at the end. I want it to the actual position of pointer – genesis Aug 05 '11 at 18:02
still switching to my address bar tsandbox.phpcode.eu/g/81281.php – genesis Aug 05 '11 at 18:52
Thats because the javascript had an error. Please see the corrections. – Jay Aug 05 '11 at 20:04
works, but not as I wanted. It appends tab to the end, not to actual pointer position – genesis Aug 05 '11 at 20:18
When you had `append` in your post I assumed thats what you wanted. In either case the updated code will work in chrome and firefox, but not IE. Hope it helps – Jay Aug 05 '11 at 21:50
The code for obtaining the caret position won't work in IE < 9. See my answer. – Tim Down Aug 06 '11 at 10:57

Tim Down · Answer 2 · 2011-08-06T11:35:57.557

For manipulating textarea selections and caret positions in jQuery, I recommend using my jQuery plug-in for doing this, which work in all major browsers and provides methods for getting and setting the caret/selection position, inserting content at the caret position and more. The code you want would be:

$("textarea").keydown(function(e) {
    if (e.keyCode == 9) {
        e.preventDefault();
        $(this).replaceSelectedText("    ");
    }
});

score 0 · Answer 3 · edited Dec 12 '12 at 19:46

0

var range = $(this).get(0).createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();

This (JSFiddle) was the best I could manage, but I can't get it working on Firefox or Chrome. If somebody manages to get the button press select text in textarea with Chrome working, feel free to let me know.

edited Dec 12 '12 at 19:46

Chris Forrence

10,042
11
48
64

answered Dec 12 '12 at 19:20

JASPER

9
1

score 0 · Answer 4 · edited May 23 '17 at 12:07

0

Take a look at Keypress in jQuery: Press TAB inside TEXTAREA (when editing an existing text)

edited May 23 '17 at 12:07

Community

1
1

answered Aug 05 '11 at 17:47

janhartmann

14,713
15
82
138

Pawan Choudhary · Answer 5 · 2011-08-05T18:12:38.387

0

Try this one, i'm damn sure it will work.

<form> 
   <textarea></textarea> 
</form> 
<script> 
$(function(){ 
    $("textarea").keydown(function(e){ 
        if (e.which == 9){ 

                     $("textarea").append("    "); 
                     return false;
        } 
    }); 
}); 
</script>

I just simply changed the word "keyCode" to "which", 'cause the word keyCode is derived from jquery ui.

edited Aug 05 '11 at 18:12

answered Aug 05 '11 at 18:03

Pawan Choudhary

1,073
1
10
20

Kindly, check my code again, i did a little modification again, it's working fine for me in all browsers now. – Pawan Choudhary Aug 05 '11 at 18:13

Find position of cursor in textarea

5 Answers5