1

I have an input text box that is data bound to an mvvm value which I default string of "RFQ". When the user tabs into the textbox I want the cursor to be at the end of the string. Current behavior has the string highlighted. I downloaded a jQuery library (jquery-caret.js) which has a method called .caretToEnd() and it works very well if I use it in the Document Ready like this:

 $("#txtRfq").caretToEnd();

But I want to use it like this:

$("#txtRfq").focus(function () {
     $("#txtRfq").caretToEnd();
    });

But when I tab into the text box with this code loaded the entire string "RFQ" is highlighted. What am I missing here?

Alan Fisher
  • 2,005
  • 4
  • 41
  • 61
  • are you looking for a fix for this specific item (or) solution for setting cursor at end? if latter, check this [SO post](http://stackoverflow.com/questions/4715762/javascript-move-caret-to-last-character/4716021#4716021) – Harry Sep 09 '13 at 16:39
  • I found http://stackoverflow.com/a/5861331/1276124, which `blur` and that function might do the trick – Ryan B Sep 09 '13 at 16:39
  • @Harry, I have a function ( .caretToEnd()) that places the cursor at the end of a textbox. It works if I use it in the Document Ready function just fine. The problem is that I need it to work when the text box gets the focus. When I try using the code above, the text in the box is highlighted. – Alan Fisher Sep 09 '13 at 20:41
  • @AlanFisher: Can you post your full code or create a fiddle? Or can you provide me the link from where I can get this specific library? I searched and found quite a few similar ones :( – Harry Sep 10 '13 at 04:58
  • @Harry, Here is the fiddle. http://jsfiddle.net/AkAlan/YuA9G/2/ – Alan Fisher Sep 10 '13 at 16:04
  • I'm not familiar with jsFiddle and didn't know how to add the jquery-caret.js library. It is on github. Thanks for your help. – Alan Fisher Sep 10 '13 at 16:11
  • @AlanFisher: I read that the native `focus` event (highlighting) cannot be suppressed and hence we have to implement a kind of a work-around solution (using `delay`). This [**fiddle**](http://jsfiddle.net/hari_shanx/YuA9G/5/) has a sample. Check it out and if you are OK, I will add it as an answer. (Note: Look into the comments I have added in the fiddle too). – Harry Sep 10 '13 at 16:39
  • @Harry, That is fantastic! Thanks for the help. Where did you read the info on needing the delay? I tried it with a delay of 1 and it still worked, why did you use 13? Post the answer and I will gladly accept. – Alan Fisher Sep 10 '13 at 17:15
  • @AlanFisher: That was just a random number from the example provided [**here**](https://github.com/DrPheltRight/jquery-caret/commit/20803a7a164a147ea513c68fd7aadbcf884100f8) – Harry Sep 11 '13 at 03:15

1 Answers1

2

The native focus action (highlighting of text) cannot be suppressed and hence we have to add a delay and then call the caretToEnd() function like shown below.

    $("#txtRfq").on("focus", function (e) {
        $(this).delay(13).caretToEnd();
    });

This link has a working sample.

The above information is based on the example provided here

Harry
  • 87,580
  • 25
  • 202
  • 214