JavaScript - Select span text on mouse hover

Question

I have this HTML code.

<div class="dontsplit" onmouseover="selCode('c111');">
  Face savoring delicious food <span class="notranslate" id="c111"></span>
</div>

I want to select the value between span tags when mouse hovers the div. The code I am using is this.

function selCode(objId) {
    if(document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(objId));
        range.select();
    } else if(window.getSelection) {
        var range = document.createRange();
        range.selectNode(document.getElementById(objId));
        window.getSelection().addRange(range);
    }
}

But it doesn't seem to work. How do I get this work?

I repeat. I need to automatically select the text between span when mouse hovers over the div. So it can be copied easily. Thanks in advance!

Ok...then its better to remove `jQuery` tag from the question...got confused. — Sandeep Nayak, Mar 03 '15 at 04:44
Well if this code looks like vanilla ... if you need jQuery put jQuery in the whole code not just for a text selection and btw with jQuery Sandeep Nayak provided you a good answer — MrVinz, Mar 03 '15 at 04:46

score 1 · Answer 1 · answered Mar 03 '15 at 04:45

1

I think this should help.

You can use jQuery .text() method.

You have a span with notranslate class.

So you can do somthing like this to get the text:

$(".notranslate").text();

http://jsfiddle.net/L8r6ns88/

answered Mar 03 '15 at 04:45

Sandeep Nayak

4,649
1
22
33

Thanks! It's "alerting" the text. Anyway to select the text or copy it to clipboard? – Hussain Noor Mohamed Mar 03 '15 at 04:47
Just a demo..you can modify it accordingly to your requirements. – Sandeep Nayak Mar 03 '15 at 04:48

score 1 · Accepted Answer · answered Mar 03 '15 at 04:46

1

Your script is working for the first mouseover but the second one inwards is giving the error Discontiguous selection is not supported. so clear the existing selection before doing a new selection.

function selCode(objId) {
    if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(objId));
        range.select();
    } else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(document.getElementById(objId));
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
    }
}

Demo: Fiddle

answered Mar 03 '15 at 04:46

Arun P Johny

384,651
66
527
531

Thanks. This works in browser. But when trying to use it in a chrome extension, it's not working. – Hussain Noor Mohamed Mar 03 '15 at 04:50
i figured it out: http://stackoverflow.com/questions/17601615/the-chrome-extension-popup-is-not-working-click-events-are-not-handled – Hussain Noor Mohamed Mar 03 '15 at 04:54

score 0 · Answer 3 · answered Mar 03 '15 at 04:46

Try this one. I'm using jquery to make this task done.

HTML

<div class="dontsplit">
  Face savoring delicious food <span class="notranslate" id="c111"></span>
</div>

JS

$(function(){

  $('.dontsplit').on('mouseover','.notranslate', function(){
  console.log($(this).text()); //see result
 })
})

JavaScript - Select span text on mouse hover

3 Answers3