public
Last active

jQuery Text Selection method and events

  • Download Gist
jquery.textselect.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97
/* jQuery plugin textselect
* version: 1.0
* tested on jQuery 1.3.2, 1.5
* author: josef.moravec@gmail.com, duane.johnson@gmail.com
*
* usage:
* $(function() {
* $(document).bind('textselect', function(e) {
* Do stuff with e.text
* });
* });
* --OR--
* $('#textdiv').selectText();
*/
(function($) {
// Taken from http://stackoverflow.com/questions/985272/jquery-selecting-text-in-an-element-akin-to-highlighting-with-your-mouse
$.fn.selectText = function() {
var obj = this[0];
if ($.browser.msie) {
var range = obj.offsetParent.createTextRange();
range.moveToElementText(obj);
range.select();
} else if ($.browser.mozilla || $.browser.opera) {
var selection = obj.ownerDocument.defaultView.getSelection();
var range = obj.ownerDocument.createRange();
range.selectNodeContents(obj);
selection.removeAllRanges();
selection.addRange(range);
} else if ($.browser.safari) {
var selection = obj.ownerDocument.defaultView.getSelection();
selection.setBaseAndExtent(obj, 0, obj, 1);
}
return this;
};
$.event.special.textselect = {
setup: function(data, namespaces) {
$(this).data("textselected",false);
$(this).bind('mouseup', $.event.special.textselect.handler);
},
teardown: function(data) {
$(this).unbind('mouseup', $.event.special.textselect.handler);
},
handler: function(event) {
var text = $.event.special.textselect.getSelectedText().toString();
if (text != '') {
$(this).data("textselected",true);
event.type = "textselect";
event.text = text;
$.event.handle.apply(this, arguments);
}
},
getSelectedText: function() {
var text = '';
if (window.getSelection) {
text = window.getSelection();
} else if (document.getSelection) {
text = document.getSelection();
} else if (document.selection) {
text = document.selection.createRange().text;
}
return text;
}
};
 
$.event.special.textunselect = {
setup: function(data, namespaces) {
$(this).data("textselected",false);
$(this).bind('mouseup', $.event.special.textunselect.handler);
$(this).bind('keyup', $.event.special.textunselect.handlerKey)
},
teardown: function(data) {
$(this).unbind('mouseup', $.event.special.textunselect.handler);
},
handler: function(event) {
if($(this).data("textselected")) {
var text = $.event.special.textselect.getSelectedText().toString();
if(text=='') {
$(this).data("textselected",false);
event.type = "textunselect";
$.event.handle.apply(this, arguments);
}
}
},
handlerKey: function(event) {
if ($(this).data("textselected")) {
var text = $.event.special.textselect.getSelectedText().toString();
if ((event.keyCode == 27) && (text=='')) {
$(this).data("textselected",false);
event.type = "textunselect";
$.event.handle.apply(this, arguments);
}
}
}
};
 
})(jQuery);

Note: You will need jQuery.migrate (https://github.com/jquery/jquery-migrate/) to make it work for jQuery 1.9+.
$.browser is removed starting from 1.9+.

This piece of code can not select all text inside of a div. Say, there are several span tags in a div. The code selects only the first tag (in my case, this was the first line). Solved it already! I changed line 11. Instead of 1 in the last parameter, I computed the number of children inside the div and it worked. Please enhance the code sometime :)

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.