How to enable TAB key in TEXTAREA

crh3675 · #1 04-10-2004, 07:57 PM

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>

steelersfan88 · #2 04-11-2004, 10:51 AM

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.

crh3675 · #3 04-11-2004, 10:53 AM

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!

crh3675 · #4 04-11-2004, 10:54 AM

Sure you can, check out the script I provided above your post.

crh3675 · #5 04-11-2004, 10:55 AM

Thanks man! Works great!

steelersfan88 · #6 04-11-2004, 11:14 AM

nice crh3675. We also don't talk to ourself, but we can pretend anyway

crh3675 · #7 04-11-2004, 11:23 AM

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

steelersfan88 · #8 04-11-2004, 11:31 AM

well the weekends get pretty boring, so talking to yourself is ok, i guess

AdamGundry · #9 04-11-2004, 02:46 PM

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

nshiell · #10 04-11-2004, 03:35 PM

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

steelersfan88 · #11 04-11-2004, 03:49 PM

see, it was all because you talked to yourself

meethimanshu · #12 03-04-2006, 06:06 AM

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

Hurrraayyy!

felgall · #13 03-04-2006, 03:35 PM

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;

crh3675 · #14 03-05-2006, 07:35 AM

Quote:

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:

Quote:

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;

Quote:

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.

felgall · #15 03-05-2006, 02:17 PM

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.

Thread Tools
Show Printable Version Email this Page
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)