Wednesday, January 25, 2012

jQuery UI & Disabling Text Selection on Click

Part of making a wonderfully interactive website with jQuery is the process of making certain elements clickable. Sometimes that means making a portion of text interactive without using the regular means of a hyperlink. One problem comes up when doing this, however. When a person clicks rapidly the browser usually interprets this to mean you want to highlight a word or paragraph. How do you stop this? Call .disableSelection() on the element with jQuery. This will disable text selection. For example:
$('#elementId').disableSelection();
It actually binds an event on the object which prevents the default behavior. It is an undocumented feature but it is awfully handy. Remember: it requires jQuery and jQuery UI as it is part of the jQuery UI core.

No comments: