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

[J. VerSchave]

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

 

[kaeli]

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.

--

 

[Yann-Erwan Perio]

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.

 

[RobG]

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.

 

[Yann-Erwan Perio]

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.