Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: textarea tab

  1. #1
    New Coder
    Join Date
    Jun 2009
    Posts
    81
    Thanks
    0
    Thanked 8 Times in 8 Posts

    textarea tab

    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,

  2. Users who have thanked rdspoons for this post:

    Cremator (01-31-2012)

  • #2
    New Coder
    Join Date
    Jan 2012
    Location
    in the uk.
    Posts
    99
    Thanks
    2
    Thanked 6 Times in 4 Posts
    Thanks, this is useful for another key capture feature I was looking at.

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    39
    Thanked 505 Times in 499 Posts

    Question Set-up and/or usage problem.

    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.
    Last edited by jmrker; 02-07-2012 at 06:02 AM. Reason: Found problem.

  • #4
    New Coder
    Join Date
    Jun 2009
    Posts
    81
    Thanks
    0
    Thanked 8 Times in 8 Posts
    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,
    Last edited by rdspoons; 02-07-2012 at 12:16 PM.

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    39
    Thanked 505 Times in 499 Posts

    Thumbs up

    Quote Originally Posted by rdspoons View Post
    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.

  • #6
    New Coder
    Join Date
    Jun 2009
    Posts
    81
    Thanks
    0
    Thanked 8 Times in 8 Posts
    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,
    Last edited by rdspoons; 02-07-2012 at 08:22 PM.

  • Users who have thanked rdspoons for this post:

    jmrker (02-08-2012)

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    39
    Thanked 505 Times in 499 Posts

    Arrow

    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •