www.webdeveloper.com
Page 1 of 4 123 ... LastLast
Results 1 to 15 of 49

Thread: How to enable TAB key in TEXTAREA

  1. #1
    Join Date
    Jan 2004
    Location
    Washington DC
    Posts
    1,107

    Lightbulb How to enable TAB key in TEXTAREA

    Here is the code that will allow your users to use a TAB key in a textarea.

    Enjoy!

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function setSelectionRange(input, selectionStart, selectionEnd) {
      if (input.setSelectionRange) {
        input.focus();
        input.setSelectionRange(selectionStart, selectionEnd);
      }
      else if (input.createTextRange) {
        var range = input.createTextRange();
        range.collapse(true);
        range.moveEnd('character', selectionEnd);
        range.moveStart('character', selectionStart);
        range.select();
      }
    }
    
    function replaceSelection (input, replaceString) {
    	if (input.setSelectionRange) {
    		var selectionStart = input.selectionStart;
    		var selectionEnd = input.selectionEnd;
    		input.value = input.value.substring(0, selectionStart)+ replaceString + input.value.substring(selectionEnd);
        
    		if (selectionStart != selectionEnd){ 
    			setSelectionRange(input, selectionStart, selectionStart + 	replaceString.length);
    		}else{
    			setSelectionRange(input, selectionStart + replaceString.length, selectionStart + replaceString.length);
    		}
    
    	}else if (document.selection) {
    		var range = document.selection.createRange();
    
    		if (range.parentElement() == input) {
    			var isCollapsed = range.text == '';
    			range.text = replaceString;
    
    			 if (!isCollapsed)  {
    				range.moveStart('character', -replaceString.length);
    				range.select();
    			}
    		}
    	}
    }
    
    
    // We are going to catch the TAB key so that we can use it, Hooray!
    function catchTab(item,e){
    	if(navigator.userAgent.match("Gecko")){
    		c=e.which;
    	}else{
    		c=e.keyCode;
    	}
    	if(c==9){
    		replaceSelection(item,String.fromCharCode(9));
    		setTimeout("document.getElementById('"+item.id+"').focus();",0);	
    		return false;
    	}
    		    
    }
    </script>
    </head>
    <body>
    <form>
    <textarea name="data" id="data" rows="20" columns="35" wrap="off" onkeydown="return catchTab(this,event)" ></textarea>
    <input type="submit" name="submit" value="Submit"/>
    </form>
    Bittersweet web development.

  2. #2
    Join Date
    Jun 2003
    Location
    The United States Site: http://kellyj.t35.com
    Posts
    2,561
    Thanks for the code. We, however, normally do not post code like this until a user asks for it. Then, any subsequent user will get a link to where the question is already answered Nice script, however.

  3. #3
    Join Date
    Jan 2004
    Location
    Washington DC
    Posts
    1,107
    OK then,
    is it possible to allow users the ability to use the TAB key in a textarea? I can't find an answer. Please help!
    Bittersweet web development.

  4. #4
    Join Date
    Jan 2004
    Location
    Washington DC
    Posts
    1,107
    Sure you can, check out the script I provided above your post.
    Bittersweet web development.

  5. #5
    Join Date
    Jan 2004
    Location
    Washington DC
    Posts
    1,107
    Thanks man! Works great!
    Bittersweet web development.

  6. #6
    Join Date
    Jun 2003
    Location
    The United States Site: http://kellyj.t35.com
    Posts
    2,561
    nice crh3675. We also don't talk to ourself, but we can pretend anyway

  7. #7
    Join Date
    Jan 2004
    Location
    Washington DC
    Posts
    1,107
    What would be nice is a snippet repository in the forum for people to search. Many times people ask the same questions and we redirect them to different posts.

    When I come up with a solution for development, it is usually for something that more than just "I" need to use so I like to post the code. I'll refrain from talking to myself but it sure gets lonely
    Bittersweet web development.

  8. #8
    Join Date
    Jun 2003
    Location
    The United States Site: http://kellyj.t35.com
    Posts
    2,561
    well the weekends get pretty boring, so talking to yourself is ok, i guess

  9. #9
    Join Date
    Nov 2002
    Location
    Dartmoor [Holiday]
    Posts
    2,382
    If you've got a useful general-purpose script, you might consider submitting it to webdevfaqs.com, a site some of the mods set up to deal with issues such as these.

    It's then easier to find than trawling through a forum search, and (someday) people might actually start checking it _before_ asking that question about popups for the 100th time.

    Nice script, anyway.

    Adam
    "If youíre not using valid HTML, then you havenít created a Web page. You may have created something else, but it isnít a Web page." - Joe Clark

    Do something amazing (USA) | Make Poverty History

  10. #10
    Join Date
    Feb 2004
    Location
    London UK
    Posts
    248

    Woo

    Iv'e just run that script and it works great.
    V usefull for a project im working on ill post a link to it when im done

    Web Standards Make Sense!

  11. #11
    Join Date
    Jun 2003
    Location
    The United States Site: http://kellyj.t35.com
    Posts
    2,561
    see, it was all because you talked to yourself

  12. #12
    Join Date
    Mar 2006
    Posts
    1

    Lightbulb Fantastic job done

    What a brilliant script. You saved my life. Thanks a ton for that Hurrraayyy!

  13. #13
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    Of course that will override the standard function of the tab key in the browser and totally confuse your visitors.

    TAB key = move to next field.

    Total chaos for visitors who don't use a mouse.

    Also it won't work in a lot of browsers because the following code is garbage

    Code:
    if(navigator.userAgent.match("Gecko")){
    c=e.which;
    }else{
    c=e.keyCode;
    }
    If you are going to test for what key is pressed then do it properly using feature sensing not browser sensing.

    c = e.which ? ewhich : e.keyCode;
    Last edited by felgall; 03-04-2006 at 03:42 PM.
    Stephen

  14. #14
    Join Date
    Jan 2004
    Location
    Washington DC
    Posts
    1,107
    Also it won't work in a lot of browsers because the following code is garbage
    Thanks for the kind words felgall. Next time try to be a bit ore positive and say something like:

    Here is a better way to check for the target element since some browsers won't recognize this code:
    Code:
    if(navigator.userAgent.match("Gecko")){
    c=e.which;
    }else{
    c=e.keyCode;
    }
    New Code
    Code:
    c = e.which ? ewhich : e.keyCode;

    Of course that will override the standard function of the tab key in the browser and totally confuse your visitors.
    Felgall, You also need to understand that client requirements are all different and you are not the one who determines what a client wants. Maybe it's for a web application that has a single textarea field. So before acting like a know-it-all, you need to understand the programmer/client's usage. This script helped me with a project and I hope it can help others. If you have something better or more to add, you are welcome to offer input.
    Last edited by crh3675; 03-05-2006 at 07:39 AM.
    Bittersweet web development.

  15. #15
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    People visiting web pages expect them to work a certain way. Tab is used to move from one field to the next. Changing the tab functionality may make your page unusable to some visitors as they will have no way to move between fields as you have changed that function to do something different. At best that person will then leave your site. At worst they will sue you for making the site inaccessible to them.
    Stephen

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 guests)

Posting Permissions

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



Recent Articles