Tabbing in text boxes

Question

How can I make a text box that allows users to enter tabs, and does not send the user to the next element when the tab button is pressed?

Answer 1

You can use JavaScript to catch the tab keypress event and replace it with spaces (I'm not sure about inserting tabs into a textarea).

E: This page looks good.

Answer 2

onkeypress, onkeyup or onkeydown check the key that was pressed and if it is a tab then append \t to the textbox and return false so that focus remains on the textbox you will most likely have to use textranges so that tabs can be inserted anywhere not at the end of the text that's the basic idea for the rest google is your friend :)

Answer 3

There are already some plug-ins for jQuery that do this. One for example is Tabby.

Answer 4

You only need to check for tabs onkeydown via event.keyCode === 9. Inserting the character into the textarea is non-trivial - use a library or google for 'insertatcaret'.

Answer 5

<textarea onkeydown="return catchTab(this, event);">

JS code:

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();
      }
     }
    }
}

function catchTab(item,e){
    if(navigator.userAgent.match("Gecko")){
     c=e.which;
    } else{
     c=e.keyCode;
    }
    if(c==9){
     replaceSelection(item, "\t");
     setTimeout(function() { item.focus() } , 0);
     return false;
    }
} 

Answer 6

Do NOT try to capture the onkeypress event for the 'TAB' key in IE (it doesn't work) (bug 249)

Try onkeydown or onkeyup instead.