1

I am trying to replicate the behavior of this jQuery plugin, but for elements that are not text inputs.

I want to be able to click and drag the mouse to select text, and as the text is selected, the function is called and has access to the currently selected text.

2 Answers 2

0

You can use the mousemove event to check for text selection. This is a basic example. The listener (callback) will only be called when there is a new selection.

function addTextSelectListener(element, listener) {
  var currentSelTxt = '';
  element.addEventListener('mousemove', function() {
    var sel = window.getSelection();
    var newSelTxt = sel.toString();
    if (newSelTxt !== currentSelTxt) {
      currentSelTxt = newSelTxt;
      listener(sel, newSelTxt);
    }
  });
}
var outputElem = document.getElementById('output');
addTextSelectListener(window, function(sel, selTxt) {
  console.log(sel);
  outputElem.innerHTML = selTxt;
});
<body>
  <p>Some text and stuff!</p>
  <p id="output"></p>
</body>

4
  • Thanks for your help... Can I add spans to the selected text exclusively, or can I only search the page for text matching the selection, and add spans to all instances?
    – Adam Stone
    Feb 25, 2015 at 1:44
  • @AdamStone I updated my answer to pass the actual selection object to the callback. That includes some element references that you might want to use.
    – m59
    Feb 25, 2015 at 1:56
  • How would I place spans around the selected text? Am I pushing my luck here?
    – Adam Stone
    Feb 25, 2015 at 2:33
  • @AdamStone You don't need luck, just time. It's a bit of a project, more than I think is appropriate for a SO post, and if so, then it'd warrant another question. To get you started, you'd probably take the sel object from my answer (the first param of the callback), and look at the dom node references contained within. It's really easy if you only select text within one element, but more complicated if you select text across several elements. You can manipulate the text of those elements from there.
    – m59
    Feb 25, 2015 at 2:38
0

Here's a fiddle: http://jsfiddle.net/z9rnnLmn/3/

Because you want to do this on "drag" there is a slight timeout on mousedown before triggering the method on mouseup. Mouseup alone can get triggered on a common click which is the reason for the delay.

Good luck.

var DRAG = false;

function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;
}

$("body").on("mousedown", function () {
    setTimeout(function () {
        DRAG = true;
    }, 250)
});

$("body").on("mouseup", function () {
    if (DRAG) {
        alert(getSelectionText());
        DRAG = false;
    }

});
1
  • I updated my answer now realizing that he wants it to update on drag. I don't think yours does quite what the OP is hoping for, which would involve the "mousemove" event. See the demo on my answer.
    – m59
    Feb 25, 2015 at 1:36

Not the answer you're looking for? Browse other questions tagged or ask your own question.