Maintain Text Selection When Using DIV as a button

Question

Maybe this is a browser related issue? I'm on Chrome at the moment...

What I'm trying to accomplish is allow the user to save text that they've selected (highlighted) on the page with their cursor.

I've got the javascript/jQuery/ajax all setup...and it works like a charm when I'm testing it via the console.

i.e. - I select some text and then run this command.

alert(getSelected());

To which I get an alert popup with the selected characters. ...so it works in theory.

HOWEVER - When I want to use a button to make the call, what's happening is that the text selection dissapears FIRST, and thus I am unable to then see/save what they've selected.

<script>
$('#save').click(function(){
  var selected_text = getSelected();
});
</script>

<div id="save"><img src="the_save_button.jpg" height="50" width="50" /></div>

Is there a way to maintain the text selection upon clicking/after clicking the "save" DIV?

Open to any and all solutions!! Thanks!

Answer 1

One easy option is to use mousedown instead of click. However, this is different to the native behaviour of buttons, which is to fire an action when the mouse button is released, so is not great UI.

Another option is to make the clickable element unselectable, using a combination of proprietary CSS properties and the unselectable attribute for IE and Opera, which prevents the click from clearing the selection:

Demo: http://jsfiddle.net/timdown/UUQJs/

CSS:

.unselectable {
    -khtml-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

HTML:

<div id="save" unselectable="on" class="unselectable"><img
   src="the_save_button.jpg" height="50" width="50" unselectable="on" /></div>

Answer 2

Try the folowing:

$('#save').click(function(){
   var selected_text = "";
   if (window.getSelection) {
        selected_text = window.getSelection();
   } else if (document.getSelection) {
        selected_text = document.getSelection();
   } else if (document.selection) {
        selected_text = document.selection.createRange().text; 
   }
   alert(selected_text)
});

DEMO

or:

$('#save').mousedown(function(){
   // ...
});

DEMO