By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,693 Members | 1,650 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,693 IT Pros & Developers. It's quick & easy.

Controlling the function of the tab key on in a TEXTAREA field

P: n/a
I am curious if there is a way to handle this... maybe with Javascript...

Is there a way to set a TEXTAREA field so that the tab key on the
user's keyboard will create a tab within the text rather than tabbing
to the next field on the form?

Thanks.

-j
Jul 23 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
In article <c5**************************@posting.google.com >, carlisle411
@yahoo.com enlightened us with...
I am curious if there is a way to handle this... maybe with Javascript...

Is there a way to set a TEXTAREA field so that the tab key on the
user's keyboard will create a tab within the text rather than tabbing
to the next field on the form?


If there is, it will then render the UI unusable to some people with
disabilities who rely on the tab key to move between fields.

Screwing with the UI is usually a Bad Idea.
The tab key is for moving between fields. The enter key usually submits a
form. The F5 key refreshes. Users count on a consistent UI.

You may want to consider having a special button that inserts a tab after the
existing text in the textarea instead. (I haven't checked on this and don't
know if it can be done, but I know inserting other characters at the end
works in most modern browser; inserting in the middle at the cursor position
or whatnot can be difficult.)

Just something to think about if this is for general internet use.

--
--
~kaeli~
Do cemetery workers prefer the graveyard shift?
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 23 '05 #2

P: n/a
J. VerSchave wrote:
Is there a way to set a TEXTAREA field so that the tab key on the
user's keyboard will create a tab within the text rather than tabbing
to the next field on the form?


Kaeli's already stressed the risk of doing so; you might (will) break
accessibility for your users, so that's not something you'll want to do
eventually.

However, this can be done in IE5+ and latest Mozilla (I'm not satisfied
with Mozilla results, but haven't OTOH really tried to find an optimum
solution).
<textarea rows="10"
cols="30"
onkeydown="tab(this,event)"></textarea>

<script type="text/javascript">
function tab(ta,evt){
if(ta.createTextRange) { // assume IE's model
(function(){
var rng=null;
ta.onblur=function(){if(rng){rng.select();rng=null ;}}
ta.onkeydown=function(){
if(window.event.keyCode==9)
(rng=document.selection.createRange()).text="\t";
}
ta.onkeydown();
})();
} else if(ta.setSelectionRange) { // assume Mozilla's model
ta.onkeydown=function(evt){
if(evt.keyCode==9) {
var t=this, start=t.selectionStart, end=t.selectionEnd;
t.value=t.value.substring(0, start)+"\t"+t.value.substr(end);
t.setSelectionRange(start+1,start+1);
setTimeout(function(){t.focus();},1);
}
}
} else {
ta.onkeydown=null;
}
}
</script>
HTH,
Yep.
Jul 23 '05 #3

P: n/a
Yann-Erwan Perio wrote:
J. VerSchave wrote:
Is there a way to set a TEXTAREA field so that the tab key on the
user's keyboard will create a tab within the text rather than tabbing
to the next field on the form?

Kaeli's already stressed the risk of doing so; you might (will) break
accessibility for your users, so that's not something you'll want to do


As a suggestion, why not use "Ctrl+tab" rather than plain
"tab"? It seems to be pretty standard for inserting tabs in
table cells in a word processor, so why not for HTML
textarea too?

Cheers, Rob.
Jul 23 '05 #4

P: n/a
RobG wrote:
As a suggestion, why not use "Ctrl+tab" rather than plain "tab"? It
seems to be pretty standard for inserting tabs in table cells in a word
processor, so why not for HTML textarea too?


This seems indeed to be a much better idea, all the more it should
silence the accessibility problem (unless some browser implements both
ranges and CTRL+TAB, but I know of none). The initial script changes to
the following.
<textarea rows="10"
cols="30"
onkeydown="tab(this,event)"></textarea>

<script type="text/javascript">
function tab(ta,evt){
if(ta.createTextRange) { // assume IE's model
(function(){
var rng=null;
ta.onblur=function(){if(rng){rng=null;this.focus() ;}}
ta.onkeydown=function(){
if(event.keyCode==9 && event.ctrlKey)
(rng=document.selection.createRange()).text="\t";
}
ta.onkeydown();
})();
} else if(ta.setSelectionRange) { // assume Mozilla's model
ta.onkeydown=function(evt){
if(evt.keyCode==9 && evt.ctrlKey) {
var t=this, start=t.selectionStart, end=t.selectionEnd;
t.value=t.value.substring(0, start)+"\t"+t.value.substr(end);
t.setSelectionRange(start+1,start+1);
setTimeout(function(){t.focus();},1);
}
}
} else {
ta.onkeydown=null;
}
}
</script>
Cheers,
Yep.
Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.