textarea tab

rdspoons · 01-31-2012, 12:02 AM

Here's one way to allow tabs in an element that supports it - like a textarea.

works in ie,ff,safari,opera
tested on windows, ubuntu

Code:

(function(){
	var _checkfortab = (document.selection)?
		function(e){
			e.onkeydown=
				function(){
					if(event.keyCode==9){
						this.focus();
						sel = document.selection.createRange();
						sel.text = String.fromCharCode(9);
						return false;
					}
				}
		}:
		function(e){
			e.onkeydown=
				function(e){
					if(e.keyCode==9){
						var startPos =this.selectionStart;
						var endPos = this.selectionEnd;
						this.value = this.value.substring(0, startPos)+ String.fromCharCode(9)+ this.value.substring(endPos, this.value.length);
						return false;
					}
				}
		}
	window.allowTabs=function(el){_checkfortab(el)};
})();

You use it like this:

Code:

allowTabs(textareaElement);

A specific example:

Code:

allowTabs(getElementsByTagName("textarea")[0]);

allowTabs is a global function due to the last line in the code block.

Code:

window.allowTabs=function(el){_checkfortab(el)};

You can change this from a global function to a library member by changing that line of code to return an object and add a variable to recieve the object.

like this (assuming myLib is an object):

Code:

var myLib.editbox = (function(){
...
   return {allowTabs:function(el){_checkfortab(el)}};
})()

now you would use it like this:

Code:

myLib.editbox.allowTabs(getElementsByTagName("textarea")[0]);

The result is a textarea that cpatures tabs and prints them into the textarea when you hit the tab key.

Don't forget to make sure the element exists before you try to use allowTabs on it

Thanks,

Cremator · 01-31-2012, 07:01 AM

Thanks, this is useful for another key capture feature I was looking at.

jmrker · 02-07-2012, 04:54 AM

I tried using your function, but I don't seem to have a true understanding of how to set it up. Here is my attempt. What am I doing wrong?

Code:

<html>
<head>
<title> Tabs in Textarea </title>
<script type="text/javascript">
(function(){
  var _checkfortab = (document.selection)
    ? function(e){
      e.onkeydown=
	function(){
	  if(event.keyCode==9){
	    this.focus();
	    sel = document.selection.createRange();
	    sel.text = String.fromCharCode(9);
	    return false;
	  }
	}
      }
    : function(e){
      e.onkeydown=
	function(e){
	  if(e.keyCode==9){
	    var startPos =this.selectionStart;
	    var endPos = this.selectionEnd;
	    this.value = this.value.substring(0, startPos)
                       + String.fromCharCode(9)+ this.value.substring(endPos, this.value.length);
	    return false;
	  }
	}
    }
  window.allowTabs=function(el){_checkfortab(el)};
})();
window.onload = function() {
  allowTabs(getElementsByTagName("textarea")[0]);
}

</script>

<style type="text/css">

</style>
</head>
<body>
<textarea rows="8" cols="40"></textarea>
</body>
</html>

Ah ha! I found it. You need one extra document. See:

Code:

window.onload = function() {
  allowTabs(document.getElementsByTagName("textarea")[0]);
}

So now a new question: Where do you change the amount of space indented with the press of the tab key?

Confused again.

rdspoons · 02-07-2012, 09:52 AM

jmrker,

You can control the behavior of the tab key by using a variable instead of a hard-coded tab: String.fromCharCode(9).

You could set it up like this:

Code:

(function(){
	//var tabspace = String.fromCharCode(9); // don't want a tab.
	var tabspace = "    "; // <-- 4 spaces, or what ever you want the tab key to produce.
	var _checkfortab = (document.selection)?
		function(e){
			e.onkeydown=
				function(){
					if(event.keyCode==9){
						this.focus();
						sel = document.selection.createRange();
						sel.text = tabspace;
						return false;
					}
				}
		}:
		function(e){
			e.onkeydown=
				function(e){
					if(e.keyCode==9){
						var startPos =this.selectionStart;
						var endPos = this.selectionEnd;
						this.value = this.value.substring(0, startPos)+ tabspace+ this.value.substring(endPos, this.value.length);
						return false;
					}
				}
		}
	window.allowTabs=function(el){_checkfortab(el)};
})();
allowTabs(document.getElementsByTagName("textarea")[0]);

You can always replace tabspace=" " with any Space function or configuration object you've created to allow different spacing options if you want.

Thanks,

jmrker · 02-07-2012, 04:47 PM

Quote:

Originally Posted by rdspoons

jmrker,

You can control the behavior of the tab key by using a variable instead of a hard-coded tab: String.fromCharCode(9).

You could set it up like this:

Code:

	var tabspace = "    "; // <-- 4 spaces, or what ever you want the tab key to produce.

You can always replace tabspace=" " with any Space function or configuration object you've created to allow different spacing options if you want.

Thanks,

Thanks, that was the variable I was looking for in my original post.
I also was not aware of the use of the String.fromCharCode(9) actions.

rdspoons · 02-07-2012, 07:00 PM

The original code did not place the caret correctly in most browsers.
Below is a correction that places the caret correctly.

Code:

(function(){
	var _tabspace = arguments[0]||String.fromCharCode(9);
	var _caretBump = _tabspace.length;
	var _checkfortab = (document.selection)?
		function(e){
			e.onkeydown=
				function(){
					if(event.keyCode==9){
						this.focus();
						sel = document.selection.createRange();
						sel.text = _tabspace;
						return false;
					}
				}
		}:
		function(e){
			e.onkeydown=
				function(e){
					if(e.keyCode==9){
						var me = this;
						var startPos = this.selectionStart;
						me.caretpos = this.selectionStart + _caretBump;
						var endPos = this.selectionEnd;
						this.value = this.value.substring(0, startPos)+ _tabspace + this.value.substring(endPos, this.value.length);
						setTimeout(function(){me.focus(); me.setSelectionRange(me.caretpos,me.caretpos);}, 0);
						return false;
					}
				}
		}
	window.allowTabs=function(el){_checkfortab(el)};
})("   ");  // <--4 spaces in argument.

allowTabs(document.getElementsByTagName("textarea")[0]);

I changed the function to accept an argument that sets the tab replacement charater(s) - it still defaults to printing a tab.
Feed the function the character(s) you want to see in place of a tab. The argument is 4 spaces in the above code.

Thanks,

jmrker · 02-08-2012, 02:14 AM

Nice fix.

Still need to delay the calling of the function until the <textarea> has been created.

Code:

window.onload = function() {
  allowTabs(document.getElementsByTagName("textarea")[0]);
}

</script>

<style type="text/css">

</style>
</head>
<body>
<textarea rows="8" cols="40"></textarea>
</body>
</html>

Otherwise errors occur before the display occurs.