Capturing Tab Key in Text Box

Capturing TAB key in text box

Even if you capture the keydown/keyup event, those are the only events that the tab key fires, you still need some way to prevent the default action, moving to the next item in the tab order, from occurring.

In Firefox you can call the preventDefault() method on the event object passed to your event handler. In IE, you have to return false from the event handle. The JQuery library provides a preventDefault method on its event object that works in IE and FF.

<body>
<input type="text" id="myInput">
<script type="text/javascript">
    var myInput = document.getElementById("myInput");
    if(myInput.addEventListener ) {
        myInput.addEventListener('keydown',this.keyHandler,false);
    } else if(myInput.attachEvent ) {
        myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
    }

    function keyHandler(e) {
        var TABKEY = 9;
        if(e.keyCode == TABKEY) {
            this.value += "    ";
            if(e.preventDefault) {
                e.preventDefault();
            }
            return false;
        }
    }
</script>
</body>

How to tell when Tab is pressed in TextBox

The Multiline property needs to be true as well.

From MSDN (emphasis in bold)

Gets or sets a value indicating whether pressing the TAB key in a multiline text box control types a TAB character in the control instead of moving the focus to the next control in the tab order.

so set the Multiline property to true.

As MiniTech also pointed out, KeyDown is easier to handle since it provides you with an e.KeyCode property whereas the KeyPress event only provides an e.KeyChar property.

Private Sub TextBox1_KeyDown(sender As Object, e As KeyEventArgs) _
                             Handles TextBox1.KeyDown
  If e.KeyCode = Keys.Tab Then
    'user pressed the Tab key...
  End If
End Sub

Capturing tab key only for a specific textbox

You can capture the tab key by making use of the previewkeydown of the particular text box.

Try this out,

In Preview key down,

private sub Textbox1_PreviewKeydown(ByVal sender As Object, _
ByVal e As System.Windows.Forms.PreviewKeyDownEventArgs) _
Handles Textbox1.PreviewKeyDown

    If e.KeyCode = Keys.Tab Then
            e.IsInputKey = True
    End If

End sub

In key down,

Private Sub Textbox1_KeyDown(ByVal sender As Object, _
ByVal e As System.Windows.Forms.KeyEventArgs) Handles Textbox1.KeyDown

    If e.KeyCode = Keys.Tab Then ''Your code goes here

End Sub

jQuery: How to capture the TAB keypress within a Textbox

Edit: Since your element is dynamically inserted, you have to use delegated on() as in your example, but you should bind it to the keydown event, because as @Marc comments, in IE the keypress event doesn't capture non-character keys:

$("#parentOfTextbox").on('keydown', '#textbox', function(e) { 
  var keyCode = e.keyCode || e.which; 

  if (keyCode == 9) { 
    e.preventDefault(); 
    // call custom function here
  } 
});

Check an example here.

Capture keys.TAB on KeyDown

I found a new event called PreviewKeyDown()

 Private Sub TextBox1_KeyDown(ByVal sender As Object, ByVal e As System.Windows.Forms.KeyEventArgs) Handles TextBox1.KeyDown
    If e.KeyCode = Keys.Tab Then
        Me.Text = "TAB Capture From TextBox1_KeyDown At " & Now.ToString
    End If
End Sub

Private Sub TextBox1_PreviewKeyDown(ByVal sender As Object, ByVal e As System.Windows.Forms.PreviewKeyDownEventArgs) Handles TextBox1.PreviewKeyDown
    If e.KeyCode = Keys.Tab Then
        Me.Text = "TAB Capture From TextBox1_PreviewKeyDown At " & Now.ToString
    End If
End Sub

If you will execute the above code, you will able to capture TAB key on PreviewKeyDown() event.

How to fire an event when the tab key is pressed in a textbox?

The TextBox also has an AcceptsTab property that works when Multiline = True.

With those conditions, you can now see if the tab key was pressed:

Private Sub TextBox1_KeyDown(sender As Object, e As KeyEventArgs) _
                             Handles TextBox1.KeyDown
  If e.KeyCode = Keys.Tab Then
    e.SuppressKeyPress = True
    'do something
  End If
End Sub

How to not leave input field after tab key pressed? (javascript/html)

You can use onkeydown to declare a function on the document to capture all key presses (or just use the specific element). Use this to check for tab and execute your function accordingly.

document.onkeydown = function(evt) {
    evt = evt || window.event;
    if (evt.keyCode == 9) {
        evt.preventDefault();
        alert("Tab");
    }
};

Use preventDefault() to prevent the default action for the key pressed.

Capturing Tab Key in Text Box