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

What I'm trying to acplish 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 mand.

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!

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

What I'm trying to acplish 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 mand.

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!

• javascript
• jquery
• selection
• textselection

Share Improve this question Follow asked Aug 2, 2012 at 21:56 JayJay 30711 gold badge44 silver badges1111 bronze badges 1

• 1 can you post getSelected()? – Radu Commented Aug 2, 2012 at 21:58

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 9

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 bination of proprietary CSS properties and the unselectable attribute for IE and Opera, which prevents the click from clearing the selection:

Demo: http://jsfiddle/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>

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

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.

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.