1

I'm trying to get the caret position in a text area. I've used a bunch of different methods, and most involve getting a range or grabbing the selectionStart of the element. For some reason, while it works somewhat, whenever I'm still typing new characters and haven't inserted any yet, it returns one less than it should.

for example: given the following input, with the caret as |:

|      : 0
a|     : 1
ab|    : 1 <- weird!
abc|   : 2 <- still weird
ab|    : 2 <- back to normal
abc|   : 2 <- back to weird
ad|bc  : 2 <- normal 
adbce| : 5 <- now normal

I don't think I'm sure when it even happens -- it seems to be one less if you've typed in some characters but haven't inserted into the middle of the string, after which it starts working again.

why does the second character not add to the caret position? has anyone else found this?

EDIT: It's running on the 'input' event:

// use a solution from stack that works with jquery:
(function ($, undefined) {
    $.fn.getCursorPosition = function() {
        var el = $(this).get(0);
        var pos = 0;
        if('selectionStart' in el) {
            pos = el.selectionStart;
        } else if('selection' in document) {
            el.focus();
            var Sel = document.selection.createRange();
            var SelLength = document.selection.createRange().text.length;
            Sel.moveStart('character', -el.value.length);
            pos = Sel.text.length - SelLength;
        }
        return pos;
    }
})(jQuery);

$(window).load(function(){
    // when editing the query box
    $("#query_textarea").bind('input', function(){
         window.status=$("#query_textarea").getCaretPosition();
         // do some other stuff
    }
}

and I'm running Chrome on Mac

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
whiterook6
  • 3,270
  • 3
  • 34
  • 77
  • 1
    can you show us some code? do yo just type or move the caret with the keyboard/mouse? – peshkira Jul 03 '13 at 20:22
  • Which event are you handling? Which browser(s) exhibit such behavior? Add the code that you're fiddling with to the question as well. – Fabrício Matté Jul 03 '13 at 20:24
  • 3
    Are you getting the caret position in a `keydown` event? If so, and you're typing a letter, the textarea won't have the newly typed letter appended when the event fires. Try `keyup` or maybe `keypress` (but i'm not sure about that one) – Andy Jul 03 '13 at 20:25
  • Does this have anything you're looking for? http://stackoverflow.com/questions/263743/how-to-get-caret-position-in-textarea – Samuel Reid Jul 03 '13 at 20:35
  • That's one I looked at as well, they all seem to use the same methods (which makes sense): selection start, create range, etc. – whiterook6 Jul 03 '13 at 20:37
  • @Andy, I think your's was right. When I changed it to run on keyUp, it starts working properly. SO WEIRD! – whiterook6 Jul 03 '13 at 20:46

2 Answers2

0

I ran into the same issue when developing for an embedded device with an older webkit-based browser. It's an issue with the timing of dispatching the events and updating the control. In the event handler I check the length of the value of the field and the caret position and they're not the same, when typing in a field. The issue has been fixed in mid-2013 in webkit as far as I can tell. Ref: https://bugs.webkit.org/show_bug.cgi?id=110742

Edge, recent Safari, Firefox, Chrome all work as expected.

MichielB
  • 4,181
  • 1
  • 30
  • 39
-1

Does this answer your question?

pure JS: https://stackoverflow.com/a/1891501/671373

jQuery: https://stackoverflow.com/a/1909997/671373

Otherwise you might check "jQuery - fieldSelection"
https://github.com/localhost/jquery-fieldselection
From its description: "A jQuery plugin to get'n'set the caret/selection."

Community
  • 1
  • 1
maosmurf
  • 1,858
  • 17
  • 16