jQuery: get input selection range

Question

Is there any event in jQuery to listen to input selections?

For example, let's say I've written foo_bar in a text input. I then select the word foo with the mouse. So the event should return 0, 2 (the string position of foo).

Is there any possible way to accomplish this? I don't know where to start, I'm flipping trought jQuery API pages but can't seems to find anything helpfull.

I though about listening to mousedown events on the input, then somehow retrieve the position of the string where the click happened (not sure if it's even possible) and then getting the position where the mouseup happened.

Any info, sources or examples will be welcomed.

@Anujith the link not work (404 Not Found)

Marco S.
– Marco S.

2018-12-03 11:33:25 +00:00
Commented Dec 3, 2018 at 11:33 — Marco S.
– Marco S., Commented Dec 3, 2018 at 11:33

techfoobar · Accepted Answer · 2012-12-13 07:45:05Z

8

Edit:

$('#foo').select(function(e) {
    var start = e.target.selectionStart;
    var end = e.target.selectionEnd;
    console.log('Changed: ' + start + ' to ' + end);
});

Demo: http://jsfiddle.net/ZyDjV/1/

You can use the select event for this:

$('#foo').select(function(e) {
   console.log('Selection Changed');
});

Demo: http://jsfiddle.net/ZyDjV/

edited Dec 13, 2012 at 7:45

answered Dec 13, 2012 at 7:37

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jviotti Over a year ago

Is there a way to retrieve the selected text or its positions? I'm inspecting the object it returned but doesn't seems to store anything

jviotti Over a year ago

Great and very clean. Thanks

Anujith · Accepted Answer · 2012-12-13 07:41:54Z

2

See this : http://jsfiddle.net/rT5vR/

var getSelected = function(){
var t = '';
if(window.getSelection) {
    t = window.getSelection();
} else if(document.getSelection) {
    t = document.getSelection();
} else if(document.selection) {
    t = document.selection.createRange().text;
}
return t;
}

$("#myElement").select(function(eventObject) {
alert(getSelected().toString());
});

answered Dec 13, 2012 at 7:41

Anujith

9,3686 gold badges36 silver badges48 bronze badges

1 Comment

jviotti Over a year ago

great, It's a cleaner implementation of the code at the webpage you posted. I'll try it now. BTW, how much cross-browser is this?

Collectives™ on Stack Overflow

jQuery: get input selection range

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related