Textarea Tabbing – code based tabs

Funny title I know, but really that is what this code will allow you to achieve. Recently I was working on a project that let users edit some source code in a HTML textarea box and send it back to us, so to provide some simple functionality and formatting whilst editing code in a textarea I needed to find a way to mimic tab based behaviour from a text editor.

Key features

  • Single tabbing from any point
  • Selection tabbing
  • Multiple line tabbing

Demo

View Demo :: MooTools
View Demo :: jQuery

The demo has a textarea that has tabbing enabled and one below it that does not. That way you can see what pressing tab does normally in a textarea and how it would be a real pain for someone trying to edit code. Basically tabbing in a normal textarea will move your focus elsewhere, if you are trying to tab a selection, it will in some browsers delete the selection.

The HTML


The MooTools Javascript

var catchTab = new Class({

	initialize: function(id){
		var obj = this;
		$(id).addEvent( 'keydown', function(e){		
			obj.tab(this, e);
		});
	},
	
	tab: function(textArea, evt) {
		if(evt.key == "tab"){
			evt.preventDefault();
			//internet explorer is Rtarded!
			if(Browser.Engine.trident) { 
				var range = document.selection.createRange();
				range.text = '\t';
			}else{
				var start = textArea.selectionStart;
				var end = textArea.selectionEnd;
				var value = textArea.get('value');
				if (start!=end) {
					var lines = textArea.value.substring(start, end).split('\n');
					var lastI = lines.length;
					var tmpStr = '';
					lines.each(function(obj, key){
						tmpStr += '\t' + obj + (lastI != key+1 ? '\n' : '');
					}, this);
					textArea.set('value', value.substring(0, start) + tmpStr + value.substring(end, value.length));
					textArea.setSelectionRange(start, end+lastI);
				} else {
					textArea.set('value', value.substring(0, start) + '\t' + value.substring(end, value.length));
					start++;
					textArea.setSelectionRange(start, start);
				}	
			}
		}
	}

});

The jQuery Javascript

function catchTab(id) {
	
	this.init = function(id) {
		var obj = this;
		$('#'+id).bind('keydown', function(e) {
		  	obj.tab(this, e);
		});
    };

	this.tab = function(textArea, evt) {
		if(evt.keyCode == "9"){
			evt.preventDefault();
			if(jQuery.browser.msie) { 
				//internet explorer is Rtarded!
				var range = document.selection.createRange();
				range.text = '\t';
			}else{
				var start = textArea.selectionStart;
				var end = textArea.selectionEnd;
				
				var value = textArea.value;
				if (start!=end) {
					var lines = textArea.value.substring(start, end).split('\n');
					var lastI = lines.length;
					var tmpStr = '';
					$.each(lines, function(key, obj){
						tmpStr += '\t' + obj + (lastI != key+1 ? '\n' : '');
					});
					textArea.value = (value.substring(0, start) + tmpStr + value.substring(end, value.length));
					textArea.setSelectionRange(start, end+lastI);
				} else {
					textArea.value = (value.substring(0, start) + '\t' + value.substring(end, value.length));
					start++;
					textArea.setSelectionRange(start, start);
				}	
			}
		}
	};
	
    this.init(id);

}

Usage

// MooTools
window.addEvent('domready', function() {
	// ID of textarea
	new catchTab('text-area-tab');
});
// jQuery
$(document).ready(function() {
	// ID of textarea
	new catchTab('text-area-tab');				   	
});

Instructions

Pretty easy, add the HTML and Javascript to your page, target the textarea with your ID when you call ‘catchTab’, the script will do the rest of the work for you. Your textarea will now have tabbing enabled.

Accessibility

You could argue that removing the tabs natural functions from the textarea box is a bad move, it will prevent a user tabbing through your website, as once they are inside the textarea the tab will work like a text editing function, a user will need to focus off the textarea to somewhere else to regain normal tabbing functionality.

The key here is, it meets a purpose, that purpose is to allow tabbing inside a textarea so that you can correctly format code. We have all tried to edit our code on a post such as this in WordPress or other online editors only to find that every time we try to add a tab it moves our focus to the submit button or in the worst case deletes it. I’ve personally seen thousands of blog comments that suffer from poor formatting of reposted code, this is extremely useful if your users don’t know where those illusive [code] [/code] tags are hidden.

So use it at your own leisure šŸ™‚

enjoy!

9 Comments

  1. Ron Tedwater says:

    Thanks for the post

  2. I found your blog on google and read a few of your other posts. I just added you to my Google News Reader. Keep up the good work Look forward to reading more from you in the future.

  3. Ron Tedwater says:

    Really nice post,thank you

  4. Danita Jacka says:

    Great work keep it coming, best blog on earth

  5. maria andros says:

    Thanks for the post, keep posting stuff

  6. Great article. Waiting for more.

  7. Wow this is a great resource.. Iā€™m enjoying it.. good article

  8. Hey can I get you designers contact info? This is an awesome skin.

  9. Simon says:

    Hey Berry, if your interested in the design or having one done for you, just email us through the contact form šŸ™‚

Post a Comment