CODEWITHSUNDEEP
javascriptjqueryhtmlkeyeventcursor-position
Chetan
Chetan

Reputation: 5095

How to control tab key behavior in javascript or jquery?

Let's say we have two text boxes textbox1 and textbox2.

I have my cursor inside textbox1 and I then press tab key. The cursor moves to textbox2. How can I control the tab key behavior in javascript or jQuery. What I want to do is the moment the textbox1 throws focus out event, I want to check for some condition (business condition) and based on it I want to allow the default tab key behavior or point the cursor to where I want to.

Can anybody guide me how we can do it?

What I am assuming is the below flow of event : tab key press in textbox1-> textbox1 focusout event-> textbox2 selected. Basically I want some control after focusout event and before textbox2 selection. I earlier used jQuery focusout event but what it does is , it fires focusout event and also selects the textbox2 , defeating the purpose where I want to check for some condition before textbox2 is selected.

Upvotes: 2

Views: 8153

Answers (2)

fdomn-m
fdomn-m

Reputation: 28611

In your question, you mention both pressing tab and "the moment textbox1 throws focusout event".

You can do this with blur event, check your condition and, if failed, refocus the control.

By adding a class, you can apply the same event to any control:

$(".required").blur(function(e) {
   if ($(this).val() == "")
       $(this).focus();   // or redirect to any other input
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='textbox1' class='required'>
<input id='textbox2' class='required'>
<input id='textbox3' class='notrequired'>

Upvotes: 0

Jishnu V S
Jishnu V S

Reputation: 8409

first you need to find the Keycode tab

$( "#findKey" ).on( "keydown", function( event ) {
  $( "#log" ).html( event.type + ": " +  event.which );
});
<input id="findKey" value="type something">
<div id="log"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Then you can set a click function then set condition

$(document).on('keydown', function(event){
  if( event.which == 9){
     alert("now you are clicked tab");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Or may be you need to change the tab order thats what you need you can use tabindex property

All elements (except hidden elements) in the HTML form are part of the form's tab order. When the user presses the Tab key, the browser shifts the input focus from element to element in order the elements appear in the HTML code. However, sometimes you want the tab order to flow a little differently. In that case, you can number the fields using tabindex attribute.

Have a look at the example:

<form>
    Field 1 (first tab selection):
    <input type="text" name="field1" tabindex=1 /><br />
    Field 2 (third tab selection):
    <input type="text" name="field2" tabindex=3 /><br />
    Field 3 (second tab selection):
    <input type="text" name="field3" tabindex=2 /><br />
</form>

The tabbing order begins with elements with explicit tabindex values, starting from the lowest to the highest numbers. Same-valued tags get tab-selected in the order in which they appear in the document. To exclude an element from the tab order, set the value of tabindex to 0. In that case the element is skipped when the user tabs around the form.

The tabindex attribute can also be used with <a> <textarea> <select> and elements.

please refer these links

https://msdn.microsoft.com/en-us/library/aa733550(v=vs.60).aspx

https://www.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/

Upvotes: 5

Related Questions