Selecting a part of the contents of an input using jQuery

Question

It's a bit moot point but I'm still curious why the two following lines aren't equivalent.

$("#boink").selectionStart = 3;
document.getElementById("boink").selectionStart = 3;

The working example comes from this question. For some reason, the jQuery fetched control doesn't have the property selectionStart nor selectionEnd.

What should be used instead if I'm still going to apply jQuery selectors?

score 4 · Answer 1 · answered Jul 10 '13 at 12:18

4

That's because $("#boink") is a jQuery object and not the DOM element itself. In order to make those 2 lines equivalente you should do

$("#boink")[0].selectionStart = 3;

The array contains all matched DOM elements. Since you're selecting by id, one element can match as most so you just pick the first one using [0]

answered Jul 10 '13 at 12:18

Claudio Redi

67,454
15
130
155

Oh, right. I assumed that when we go by id using #-sign, there's no need to specify the first element in the array. My bad... – Konrad Viltersten Jul 10 '13 at 12:22

score 2 · Answer 2 · answered Jul 10 '13 at 12:19

2

You can always get the original DOM element using

$("#boink")[0].selectionStart = 3;

answered Jul 10 '13 at 12:19

U.P

7,357
7
39
61

Igor Dymov · Accepted Answer · 2013-07-10T17:20:55.093

2

$("#boink") will return jQuery object and not the control itself. To get the control you have to take element with .get method or using [] notation:

$("#boink")[0].selectionStart = 3;
$("#boink").get(0).selectionStart = 3;

edited Jul 10 '13 at 17:20

answered Jul 10 '13 at 12:19

Igor Dymov

16,230
5
50
56

Selecting a part of the contents of an input using jQuery

3 Answers3