I have some input fields that are pre-filled through jQuery. I'd like to grab the value of an input, check if it starts with "x" and if it does, select that x. (So that the user can quickly change the x by just typing something else).

I know there is a question like this here: Selecting Part of String inside an Input Box with jQuery

But it's a really old question and it doesn't really use jQuery!

So, how can I select the x in this input's value?

<input class="input" type="text" value="x*500*500" />

I tried:

var input = $('.input');
input.setSelectionRange(0, 2); // Highlights "X"
input.focus();

error: Uncaught TypeError: input.setSelectionRange is not a function. Is setSelectionRangedeprecated?

I have some input fields that are pre-filled through jQuery. I'd like to grab the value of an input, check if it starts with "x" and if it does, select that x. (So that the user can quickly change the x by just typing something else).

I know there is a question like this here: Selecting Part of String inside an Input Box with jQuery

But it's a really old question and it doesn't really use jQuery!

So, how can I select the x in this input's value?

<input class="input" type="text" value="x*500*500" />

I tried:

var input = $('.input');
input.setSelectionRange(0, 2); // Highlights "X"
input.focus();

error: Uncaught TypeError: input.setSelectionRange is not a function. Is setSelectionRangedeprecated?

• javascript
• jquery

Share Improve this question Follow edited Sep 1, 2017 at 11:00 dda 6,21322 gold badges2727 silver badges3535 bronze badges asked Oct 27, 2016 at 11:57 Björn CBjörn C 4,0081111 gold badges5252 silver badges8787 bronze badges 2

• does .charAt(0) do what you want? – SiGm4 Commented Oct 27, 2016 at 12:00
• Answer can be found here stackoverflow./questions/17158802/… – Krzysiek Szymczak Commented Oct 27, 2016 at 12:00

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You must dereference the jQuery object by adding [0]. setSelectionRange is plain JavaScript and deals with plain JS objects. It doesn't know what a jQuery object is. BTW, I changed the second parameter from 2 to 1. It's not behaving like MDN has described?

SNIPPET

var input = $('.input')[0];
input.setSelectionRange(0, 1); // Highlights "X"
input.focus();

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="input" type="text" value="x*500*500" />

var e = $('[data-field=test]');
setTimeout(function () {
  e.focus();
  var pos = e.val().indexOf('x');
  e.prop({
    'selectionStart': pos,
    'selectionEnd': pos + 1
  });
}, 100);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input data-field="test" value="hello x 123">

you are taking the plete element as in the input variable, take the value of input field and check if it starts with a character

var input = $('.input').val();
if(input.str.startsWith('X')){
    e.focus();
    var pos = e.val().indexOf('x');
    e.prop({
        'selectionStart': pos,
        'selectionEnd': pos + 1
    });
}