Have user selection a certain point of text input with javascript/jquery

Question

I have a text input.

<input type="text" id="foo" name="bar" value="11 Minutes"/>

I want it so when the user clicks on the input, that the user's "Cursor" or "Selector" is after the 11, not after the Minutes.

I do not know where to begin, if this is possible across browsers, and have been unable to find information on this.

Decent browser support should be considered as well.

@guradio That is just removing the ` Minutes` part. I need to keep it, but place the selector between it and the number. — Goose, Apr 20 '16 at 02:34
I think you have to set the focus youself at str.len - 7 (Minutes str len) — MadeInDreams, Apr 20 '16 at 02:36
@AlonEitan that may be useful, but this question is not about selecting text, but having the selector be in a different location than the end. — Goose, Apr 20 '16 at 02:37
@MadeInDreams I understand the str len but not how I can use it to move the focus. — Goose, Apr 20 '16 at 02:38
http://stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area Look at the accepted answer. In your case start and end should be the same I guess — MadeInDreams, Apr 20 '16 at 02:42
@MadeInDreams that one is much closer to my question. Thank you. This was difficult to search for because of the lack of language around the pipe selector character while typing input. Cursor isn't accurate language for it. You can close this or answer the question if you please. — Goose, Apr 20 '16 at 02:50

JF-Mechs · Accepted Answer · 2016-04-20T03:02:09.883

Try this, I don't know if this will work for you . but basically I'm setting the selectionStart and selectionEnd on where do you want the cursor to be placed.

You can also play with the selectionStart and selectionEnd. adding range between those two would result too highlighted selections. Just make it sure that start < end and you're good.

$(document).on("click", function(e){
  if (e.target && e.target.id == "foo") {
    if ($(e.target).is(":focus")) {
      e.target.selectionStart = 2;
      e.target.selectionEnd = 2;
    }
  }
  
});

<input type="text" id="foo" name="bar" value="11 Minutes"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Have user selection a certain point of text input with javascript/jquery

1 Answers1