jquery input element unselect text event?

Question

Possible Duplicate:
Unselect what was selected in an input with .select()

Is there a way to detect when a user unselects text in an input element via jQuery?

(Note: I am not asking about detecting "unselection" -- that is, blur -- of the input element itself, but about the text within the element.)

I am doing

$('#input').select(function () {...}

to show a toolbar with formatting options when the user selects text, but I have not been able to figure out how to detect if the user clears the selection.

Any suggestions?

Please explain "clears the selection". – David Hellsing Oct 03 '12 at 22:29 — David Hellsing, Oct 03 '12 at 22:29

Sushanth -- · Answer 1 · 2012-10-03T22:50:59.483

6

Try the blur Event

$('#input').on('blur',function () {
    if( this.value == ''){
         alert('Blur Event - Text box Empty');
         //Your code here
     }
});

This will fire as soon as the Input field loses the focus.. i.e; it was unselected..

edited Oct 03 '12 at 22:50

answered Oct 03 '12 at 22:42

Sushanth --

55,259
9
66
105

It might be useful to bind to click, too. – nrodic Oct 03 '12 at 22:46
2

That the element loses focus doesn't necessarily mean that the selection is cleared. For example, if the user were to click somewhere outside the page (i.e. the browsers url bar) the input field would lose focus, but the selection would still be there. – CupOfTea696 Oct 03 '12 at 22:47
1

But that can be countered for by specifying a condition in the event .. Blur or change event can get the things done here – Sushanth -- Oct 03 '12 at 22:52
Well the issue I have is that I pull up a context menu when I detect a selection so I do lose focus then give it back to the input field so I get a race condition. I was hoping there was some specific value on the element or JQuery event I could use to detect the actual selection of the input field and maybe validate if the contents are greater then 0 characters. Click and blur will not really work in this specific scenario. I could elaborate if needed? – Jesse Freeman Oct 04 '12 at 01:06

score 3 · Answer 2 · answered Oct 03 '12 at 22:59

3

There is no real javascript event to detect this. The best solution here is checking for both the blur, focus, keydown and mousedown event. This would be the most complete solution, even though it's not flawless. You could bind it to all event at the same time by using the .on method.

$("#input").select(function() {
    //do something here
});

$("#input").on("blur focus keydown mousedown", function() {
    //do something else here
});

Again, this is not a complete solution, since the blur event can happen without clearing the selection. But it's the best that you can do.

answered Oct 03 '12 at 22:59

CupOfTea696

1,266
3
14
29

I commented above but I'll repost it here too since this was interesting. Do you know if there is a way of detecting the contents or character length of a selection? I could use that to determine if the selection has been canceled. – Jesse Freeman Oct 04 '12 at 01:07
The second callback is called when the user drags the text, but the text isn't deselected after dragging. – Hykilpikonna Jun 25 '22 at 05:22

score 3 · Answer 3 · edited Feb 04 '16 at 06:44

So turns out after some experimenting I cam up with a solution. Here is what I did. I created a function that returned the selected text from the document:

function getSelectedText() {
    return document.selection.createRangeCollection()[0].text;
}

From here I was able to adapt CupOfTea696's solution of using jQuery's on event binder like so:

$("#input").on("click change keyup select", function (event) {
     if(getSelectedText().length < 1)
          hideAppBar();
     else 
          showAppBar();
 });

So I basically check the length of the selected text and based on that I show or hide the context menu.

I still have an issue with blur but that has more to do with a click event being fired in the AppBar and not the above solution. Also I only tested this out on Win8 so not sure if this would be a valid web based solution but I don't see why it wouldn't work.

Seems like a good solution (: – CupOfTea696 Oct 04 '12 at 08:32 — CupOfTea696, Oct 04 '12 at 08:32

jquery input element unselect text event?

3 Answers3