1

I have some text inside a < p > element, and need to find the word that was double tapped.

I am using a double tap jquery plugin (https://gist.github.com/attenzione/7098476) which works great on detecting the event, but I don't know how to get the word that is under it.

How can I get it?

Added what I have so far:

$("p").on('doubletap',function(event){
alert ("double tap"); // event is working
var sel = (document.selection && document.selection.createRange().text) || (window.getSelection && window.getSelection().toString());
alert ("sel "+sel); //<-- not working
});
fran35
  • 145
  • 12

2 Answers2

0

If you want to only get the word you double tapped on, you should use span tags around each word. That way you add the double tap event listener on p > span and you can fetch the word using $(clickedElement).text();.

EDIT: Add example code based on code given on Fiddle:

$(document).ready(function() {
    var words = $("#yourTextContainer").text().split(' ');
    $("#yourTextContainer").html("");

    $.each(words, function(i,val) {
        // wrap each word in a span tag 
        $('<span/>').text(val +" ").appendTo("#yourTextContainer");
    });

    $("#yourTextContainer span").dblclick(function(event) {
        var res = $(this).text();
        console.log ("sel "+res);
    });
});
webFashion
  • 748
  • 9
  • 17
0

There is one similar question for selecting word on single click. Use the mouse to select only one word in text jquery

You can change the event from click to dbclick like this : http://jsfiddle.net/tejashsoni111/EHCN6/92/

$(document).ready(function ()
{
    var words = $("#yourTextContainer").text().split(' ');
    $("#yourTextContainer").html("");

    $.each(words, function (i, val)
    {
        //wrap each word in a span tag 
        $('<span/>').text(val + " ").appendTo("#yourTextContainer");
    });

    $("#yourTextContainer span").live("dbclick", function (event)
    {
        event.stopPropagation();
        SelectText($(this));
    });
});

function SelectText(element)
{
    var doc = document,
            text = element.get(0),
            range,
            selection;
    if (doc.body.createTextRange)
    {
        range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    }
    else if (window.getSelection)
    {
        selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

Update

Returned the selected text. Check the updated fiddle : https://jsfiddle.net/tejashsoni111/mzx6zL65/2/

Community
  • 1
  • 1
tejashsoni111
  • 1,405
  • 1
  • 18
  • 34
  • Thanks, unfortunately I'm not even able to get this one work on desktop. (getting undeifned as result, sel = SelectText($(this));) – fran35 Oct 26 '16 at 13:38
  • Can you update your question and show the code how you use it? – tejashsoni111 Oct 26 '16 at 13:40
  • @tejashsoni111 why so complex code when you just need to return .text() of the double clicked element? (updated my answer to show what I mean) – webFashion Oct 28 '16 at 12:00
  • @fran35 by mistake I used the wrong approach for returning the selected value that day. but I have updated my fiddle : [https://jsfiddle.net/tejashsoni111/mzx6zL65/2/](https://jsfiddle.net/tejashsoni111/mzx6zL65/2/) . I would not be able to explain you why to use `selection` or `range` objects this documentation may help you to understand : [https://developer.mozilla.org/en-US/docs/Web/API/Selection](https://developer.mozilla.org/en-US/docs/Web/API/Selection). and [https://developer.mozilla.org/en-US/docs/Web/API/Range](https://developer.mozilla.org/en-US/docs/Web/API/Range). – tejashsoni111 Oct 28 '16 at 12:36
  • Also if you feel that you don't need that code then you can change it as per your requirement. – tejashsoni111 Oct 28 '16 at 12:37