Using Tab to go from Title to High (after title)

• Nitruc

• December 5, 2013 at 6:28 pm

By default WordPress tabs (on the keyboard) from Title to the Content Editor. Adding in a ACF in the High (after title) position puts a field inbetween the two, however, tabbing skips over the ACF.

Is there anyway that it can go from Default Title field to ACF in the High position to Default Content?

• Elliot

• December 6, 2013 at 9:24 am

Hi @Nitruc

Thanks for the bug report.
I have done some testing which you too can replicate.

If you place your cursor into the title and hit tab, the cursor remains for a split second (long enough to type another character) before skipping ot the the_content.

If you try this same process on an ACF text field, there is no lag.

The lag is definitely a jQuery event on the blur event of the title text field. I’m not sure I can override this as it is built into the WP core.

Thanks
E

• Nitruc

• December 6, 2013 at 10:19 am

Yeah, when you click on the ACF text field, then press tab, it takes you right to the content. Or if you click on the ACF text field, then press shift+tab, it takes you to the “Edit” button above, then one more time takes you to the title field. But hitting tab while in the title always skips over the ACF and right to the content. =(

It’s not a huge problem, but it is slightly annoying always skipping over that field (or fields) and having to click to go back. =/

• chris98

• February 3, 2015 at 9:02 pm

Hey Elliot,
Is there any update on this issue? I’ve added a subheadline field below the title and I’m accidently pressing the tab key every time 🙂 Any idea how to solve this?

Thanks
Chris

• chris98

• February 6, 2015 at 4:18 am

The solution:
http://wordpress.stackexchange.com/questions/126626/tabindex-on-text-input-immediately-after-wordpress-title-input

🙂

• squarecandy

• February 1, 2018 at 3:31 am

Thanks for linking to that solution @chris98. But it requires that you write a script that explicitly calls out every existing field, which is tricky if you need add a ton of fields, or are not sure if fields will be added in the future.

Has anyone figured out a way to just disable whatever jquery shenanigans are going on and just have the browser follow the natural tab order of the elements as the appear in the HTML?

• squarecandy

• June 2, 2020 at 11:16 am

Hi folks – I know it’s 7 years after this thread started, but I made a solution that does not depend on knowing what the first field is in the after_title field group.

https://gist.github.com/petertwise/8ebb6a76f018494fcc62171d622cc85f

// Admin Functions
( function( $ ) {
	// better accessiblity and data entry for ACF
	$(document).ready( function() {
		// if there is a an "after_title" field group
		if ( $( '#acf_after_title-sortables' ).length ) {
			// listen for keydown inside the main title field for any add/edit screen
			$('body.post-new-php, body.post-php').on( 'keydown', '#title', function( e ) {
				var keyCode = event.keyCode || event.which;
				// if the key is tab
				if ( 9 == keyCode ) {
					// don't do the normal core WP behavior
					e.preventDefault();
					// find the first field in the after_title area
					$( '#acf_after_title-sortables .inside > div:first-child' )
						.find( ':input:not([type=hidden])' )
						.focus();
				}
			} );
		}
	} );
} )( jQuery );

/*
Thanks to these Stack Overflow answers for inspiration:
@neiker - https://stackoverflow.com/a/17150138/947370
@gdoron-is-supporting-monica https://stackoverflow.com/a/11278006/947370
@birgire https://wordpress.stackexchange.com/a/127042/41488
*/