jQuery input text selection toggler

On a recent project I was asked to add some client side functionality to an input field, so that people clicking in the input box would have the contents auto-selected. Not a problem, a fairly easy piece of work, especially with jQuery .

This evolved into additional functionality to improve the usability of the input box though, so that if the content was already selected then the cursor was just placed where the user clicked (so that someone could edit the content rather than having to retype it). Then I was asked to allow the user to create a selection of the content and allow that to remain selected, rather than forcing the full text to be selected. I love working on Agile projects :)

I quite liked the functionality though, so I’ve reworked this into a jQuery plugin to provide the same functionality.

Requirements in summary:

1. Clicking in the input box with content in auto-selects all content.
2. If the user selects a number of characters then only those selected characters are left selected
3. If there is already selection made in the input box and the user clicks in the box, all highlighting is removed.

• Get Source
• View Demo

Some basic HTML…

…and the jQuery plugin…

(function( $ ){

	$.fn.textSelectionToggler = function() {
	
		var jqInput = $(this);
		var domInput = jqInput.get(0);
		jqInput.data('selected', false);
	
		this.mouseup(function(){                       

			if (shouldSelectAllTextInField()) {
				jqInput.select();
			}
			
			toggleSelectedFlag();
		});
	   
		this.blur(function(){	
			clearSelectionAndResetSelectedFlag();
		});
		
		/** Text selection methods **/
		function shouldSelectAllTextInField() {
			if (!textSelectionAlreadyPresent() && !specificTextRangeSelected()) {
				return true;
			}
			return false;
		}
		
		function textSelectionAlreadyPresent() {
			return jqInput.data('selected');
		}
		
		function specificTextRangeSelected() {
			if (isIE()) {
				return hasSelectionBeenMadeInIE();
			}
			return hasSelectionBeenMadeInGoodBrowser();			
		}
		
		function hasSelectionBeenMadeInIE() {
			domInput.focus();
			if (document.selection.createRange().text.length > 0) {
				return true;
			}
			return false;
		}
		
		function hasSelectionBeenMadeInGoodBrowser() {
			var selectionLength = domInput.selectionEnd - domInput.selectionStart;
			if (selectionLength > 0) {
				return true;
			}
			return false;		
		}
		
		/** Helper functions **/
		function toggleSelectedFlag() {
			if (jqInput.data('selected')) {
				jqInput.data('selected', false);
			}
			else {
				jqInput.data('selected', true);
			}
		}
		
		function isIE() {
			if (document.selection) {
				return true;
			}
			return false;
		}
		
		function isFF() {
			return ($.browser.mozilla);
		}
		
		function clearSelectionAndResetSelectedFlag() {
			if (isFF()) {
				//Fixes bug where FF selects then deselects the content after leaving and 
				//re-entering the field (if you click where the selected content was).
				var input = jqInput.get(0);
				input.selectionStart = 0;
				input.selectionEnd = 0;
			}
			
			jqInput.data('selected', false);
		}

	};
	
})( jQuery );

…and to setup the functionality…

$(document).ready(function() {           
   $("#demo-selector").inputSelector();
});

Note: I have been experimenting with different styles of JavaScript, so if you think the above may be a little long winded you may be right – it could easily be re-written in 45 lines of code or less because that is what I started with before refactoring into small functions (not yet convinced this is a better method of writing code but the experiment goes on :)).

• Get Source
• View Demo