{"id":1929,"date":"2019-03-07T00:18:14","date_gmt":"2019-03-07T05:18:14","guid":{"rendered":"https:\/\/xlinesoft.com\/blog\/?p=1929"},"modified":"2019-03-07T00:21:07","modified_gmt":"2019-03-07T05:21:07","slug":"changing-default-tab-order","status":"publish","type":"post","link":"https:\/\/xlinesoft.com\/blog\/2019\/03\/07\/changing-default-tab-order\/","title":{"rendered":"Changing default tab order"},"content":{"rendered":"<p>Normally tab order is determined by the web browser based on your Add\/Edit page structure. If you have a single row two-column form browser will tab through first cell edit controls first before switching to second cell. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2019\/03\/scr_tab_order1.png\" alt=\"\" width=\"577\" height=\"308\" class=\"alignnone size-full wp-image-1933\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2019\/03\/scr_tab_order1.png 577w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2019\/03\/scr_tab_order1-300x160.png 300w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2019\/03\/scr_tab_order1-150x80.png 150w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2019\/03\/scr_tab_order1-400x214.png 400w\" sizes=\"auto, (max-width: 577px) 100vw, 577px\" \/><\/p>\n<p>If you place each control into its own cell it will tab through first row, then second, then third etc. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2019\/03\/scr_tab_order2.png\" alt=\"\" width=\"576\" height=\"343\" class=\"alignnone size-full wp-image-1934\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2019\/03\/scr_tab_order2.png 576w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2019\/03\/scr_tab_order2-300x179.png 300w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2019\/03\/scr_tab_order2-150x89.png 150w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2019\/03\/scr_tab_order2-400x238.png 400w\" sizes=\"auto, (max-width: 576px) 100vw, 576px\" \/><\/p>\n<p>The point is that you want to be in control and you need to specify tab order that fits your application logic. Luckily it is easy to achieve placing the following code to Add\/Edit page Javascript OnLoad event:<\/p>\n<pre name=\"code\" class=\"javascript:nocontrols\">\r\n$(\"input[id^='value_CustomerID']\").attr('tabindex', 1);\r\n$(\"input[id^='value_ContactName']\").attr('tabindex', 2);\r\n$(\"textarea[id^='value_Address']\").attr('tabindex', 3);\r\n$(\"input[id^='value_Country']\").attr('tabindex', 4);\r\n$(\"input[id^='value_CompanyName']\").attr('tabindex', 5);\r\n$(\"select[id^='value_City']\").attr('tabindex', 6);\r\n$(\"input[id^='value_PostalCode']\").attr('tabindex', 7);\r\n$(\"input[id^='value_Phone']\").attr('tabindex', 8);\r\n<\/pre>\n<p>Note that you need to account for edit control type here. For regular text edits use <strong>input<\/strong>, for dropdown boxes use <strong>select<\/strong> and for textareas use <strong>textarea<\/strong>. This code should work the same way in versions 8.x-10.x of all PHPRunner, ASPRunner.NET and ASPRunnerPro. <\/p>\n<p>And here is the end result produced by this code. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2019\/03\/tab_order.gif\" alt=\"\" width=\"751\" height=\"539\" class=\"alignnone size-full wp-image-1930\" \/><\/p>\n<p>Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Normally tab order is determined by the web browser based on your Add\/Edit page structure. If you have a single row two-column form browser will tab through first cell edit controls first before switching to second cell. If you place each control into its own cell it will tab through first row, then second, then third etc. The point is that you want to be in control and you need to specify tab order that fits your application logic. Luckily it is easy to achieve&#8230;<span class=\"clearfix clearfix-post\"><\/span><a href=\"https:\/\/xlinesoft.com\/blog\/2019\/03\/07\/changing-default-tab-order\/\" class=\"more-link\">Continue Reading <span class=\"screen-reader-text\">&#8220;Changing default tab order&#8221;<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,10,1],"tags":[],"class_list":["post-1929","post","type-post","status-publish","format-standard","hentry","category-asp-net","category-news","category-php-category"],"_links":{"self":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/1929","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/comments?post=1929"}],"version-history":[{"count":2,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/1929\/revisions"}],"predecessor-version":[{"id":1936,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/1929\/revisions\/1936"}],"wp:attachment":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/media?parent=1929"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/categories?post=1929"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/tags?post=1929"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}