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!

Milligram

can you post getSelected()? – Detrude

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>

Kigali

Thanks a lot Tim! These are both great answers. – Milligram

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

Intent

Answer 3

When the user selects text, store it in a global variable. Make sure you don't erase it when they deselect; the variable should hold the last text the user selected. Then the button can reference this text. You can probably also use something like this:

$('html').click(function() {
    global_var = '';
});
$('the button').click(function(event) {
    event.stopPropagation();
});

To allow the text to be removed except when the user clicks on the button.

Harmonyharmotome

Answer 4

As soon as the selection have been made, you should assign it to a variable and save it and then only use the button click event for ajax queries. The problem involved here is that as soon as the click event is initiated, you are deselecting it again(You will notice the blue background selection part is gone once the mouse is cliked) and hence it returns nothing.

Kaylenekayley