Now respects tabindex correctly.

vdepizzol · Jul 3, 2011 · 325ed44 · 325ed44 · dmonopoly · Aug 13, 2012
1 parent cf1bc77
commit 325ed44
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 2 deletions.
diff --git a/demo_tabindex.html b/demo_tabindex.html
@@ -0,0 +1,53 @@
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+
+    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
+    <script type="text/javascript" src="src/jquery.tokeninput.js"></script>
+
+    <link rel="stylesheet" href="styles/token-input.css" type="text/css" />
+    <link rel="stylesheet" href="styles/token-input-facebook.css" type="text/css" />
+
+    <script type="text/javascript">
+    $(document).ready(function() {
+        $("input[type=button]").click(function () {
+            alert("Would submit: " + $(this).siblings("input[type=text]").val());
+        });
+    });
+    </script>
+</head>
+
+<body>
+    <h1>jQuery Tokeninput Demos</h1>
+
+    <h2>Tab index demo</h2>
+    <div>
+        <input type="text" tabindex="1" value="index 1"/>
+        <input type="text" tabindex="2" value="index 2" />
+        <input type="text" id="demo-input1" name="blah" tabindex="3" />
+        <input type="text" tabindex="4" value="index 4" />
+        <input type="button" value="Submit" tabindex="5" />
+        <script type="text/javascript">
+        $(document).ready(function() {
+            $("#demo-input1").tokenInput("http://shell.loopj.com/tokeninput/tvshows.php");
+        });
+        </script>
+    </div>
+
+    <h2>Tab index demo in a form</h2>
+    <div>
+        <form>
+            <input type="text" tabindex="6" value="index 6"/>
+            <input type="text" tabindex="7" value="index 7" />
+            <input type="text" id="demo-input2" name="blah" tabindex="8" />
+            <input type="text" tabindex="9" value="index 9" />
+            <input type="button" value="Submit" tabindex="10" />
+        </form>
+        <script type="text/javascript">
+        $(document).ready(function() {
+            $("#demo-input2").tokenInput("http://shell.loopj.com/tokeninput/tvshows.php");
+        });
+        </script>
+    </div>
+</body>
+</html>
diff --git a/src/jquery.tokeninput.js b/src/jquery.tokeninput.js
@@ -86,7 +86,6 @@ var KEY = {
     COMMA: 188
 };
 
-
 // Expose the .tokenInput function to jQuery as a plugin
 $.fn.tokenInput = function (url_or_data_or_function, options) {
     var settings = $.extend({}, DEFAULT_SETTINGS, options || {});
@@ -297,7 +296,7 @@ $.TokenList = function (input, url_or_data_or_function, settings) {
 
                     if(event.keyCode == KEY.TAB && !$(input_box).val().length) {
                         hide_dropdown();
-                        $(this).blur();
+                        // let the browser handle the tab key properly if user is trying to tab through or out
                         return true;
                     }
 
@@ -342,6 +341,9 @@ $.TokenList = function (input, url_or_data_or_function, settings) {
                                input_box.blur();
                            });
 
+    // Carry over the tab index if it's set
+    input_box.attr({ tabindex: hidden_input.attr('tabindex') });
+
     // Keep a reference to the selected token and dropdown item
     var selected_token = null;
     var selected_token_index = 0;