Support

Account

Home Forums Backend Issues (wp-admin) Using Tab to go from Title to High (after title)

Solving

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

  • 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?

  • 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

  • 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. =/

  • 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

  • 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?

  • 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
    */
    
Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Using Tab to go from Title to High (after title)’ is closed to new replies.