Tabbing through a textarea that captures tab - html

Question

Many times when I am being tab to switch fields, some times it entered into a text area where pressing tab indent your text. How can I get out these textareas using keyboard so I can continue switching fields.

Answer 1

...here is a fiddle that does the same.
If the websites themselves are overriding this default/expected behaviour then they are breaking a standard UI feature (and possibly lessening site accessibility - although that may depend on the particular application) and it is really up to the site to implement some kind of alternative. There is no other "built-in" keyboard shortcut to move focus to the "next page element".
If, however, you just want to get focus out of that textarea, then you could perhaps use another shortcut, such as Ctrl+L which moves focus to the address bar. From their you can start TABing again to move focus.

Answer 2

You can use the following to do what you need:
http://postcode.cf/support-tabs-in-text-areas.html
/* Support Tabs within your textarea */
HTMLTextAreaElement.prototype.getCaretPosition = function () { //return the caret position of the textarea
return this.selectionStart;
};
HTMLTextAreaElement.prototype.setCaretPosition = function (position) { //change the caret position of the textarea
this.selectionStart = position;
this.selectionEnd = position;
this.focus();
};
HTMLTextAreaElement.prototype.hasSelection = function () { //if the textarea has selection then return true
if (this.selectionStart == this.selectionEnd) {
return false;
} else {
return true;
}
};
HTMLTextAreaElement.prototype.getSelectedText = function () { //return the selection text
return this.value.substring(this.selectionStart, this.selectionEnd);
};
HTMLTextAreaElement.prototype.setSelection = function (start, end) { //change the selection area of the textarea
this.selectionStart = start;
this.selectionEnd = end;
this.focus();
};
var textarea = document.getElementsByTagName('textarea')[0];
textarea.onkeydown = function(event) {
//support tab on textarea
if (event.keyCode == 9) { //tab was pressed
var newCaretPosition;
newCaretPosition = textarea.getCaretPosition() + " ".length;
textarea.value = textarea.value.substring(0, textarea.getCaretPosition()) + " " + textarea.value.substring(textarea.getCaretPosition(), textarea.value.length);
textarea.setCaretPosition(newCaretPosition);
return false;
}
if(event.keyCode == 8){ //backspace
if (textarea.value.substring(textarea.getCaretPosition() - 4, textarea.getCaretPosition()) == " ") { //it's a tab space
var newCaretPosition;
newCaretPosition = textarea.getCaretPosition() - 3;
textarea.value = textarea.value.substring(0, textarea.getCaretPosition() - 3) + textarea.value.substring(textarea.getCaretPosition(), textarea.value.length);
textarea.setCaretPosition(newCaretPosition);
}
}
if(event.keyCode == 37){ //left arrow
var newCaretPosition;
if (textarea.value.substring(textarea.getCaretPosition() - 4, textarea.getCaretPosition()) == " ") { //it's a tab space
newCaretPosition = textarea.getCaretPosition() - 3;
textarea.setCaretPosition(newCaretPosition);
}
}
if(event.keyCode == 39){ //right arrow
var newCaretPosition;
if (textarea.value.substring(textarea.getCaretPosition() + 4, textarea.getCaretPosition()) == " ") { //it's a tab space
newCaretPosition = textarea.getCaretPosition() + 3;
textarea.setCaretPosition(newCaretPosition);
}
}
}