Tabindex on text input immediately after WordPress title input

Question

The following code adds a text input for a subtitle to the space directly below the title input, via the edit_form_after_title hook. However, when editing the title, pressing tab moves the cursor to the main post editor and I can't figure out what tabindex I should use (or some other method if available) in order to tab from the title to my subtitle input instead.

add_action( 'edit_form_after_title', 'add_input' );

function add_input(){

    global $post;

    $options = get_option( 'kia_subtitle_options' );

    // only show input if the post type was not enabled in options
    if ( isset ( $options['post_types'] ) && in_array( $post->post_type, $options[ 'post_types'] ) ) {

        //create the meta field (don't use a metabox, we have our own styling):
        wp_nonce_field( plugin_basename( __FILE__ ), 'kia_subnonce' );

        //get the subtitle value (if set)
        $sub = get_post_meta( get_the_ID(), 'kia_subtitle', true );

        // echo the inputfield with the value.
        printf( '<input type="text" class="widefat" name="subtitle" placeholder="%s" value="%s" id="the_subtitle" tabindex="1"/>',
                __( 'Subtitle', 'kia-subtitle'   ),
                 esc_attr($sub) );
     }
}

Answer 1

I found last part of @birgire answer the most useful way, however it breaks the possibility to tab to content. In fact I think is normal focus the content by click tab while in the subtitle field.

To do that, you have also to take care if the content is shown in the "Text" tab or in the "Visual" tab (TynyMCE).

I put the code inline , inside your function, but you can use wp_enqueue_script or add it to some javascript file already enqueued in post edit screen.

add_action( 'edit_form_after_title', 'add_input' );

function add_input(){
  global $post;
  $options = get_option( 'kia_subtitle_options' );
  // only show input if the post type was not enabled in options
  if ( isset ( $options['post_types'] ) && in_array( $post->post_type, $options[ 'post_types'] ) ) {
    //create the meta field (don't use a metabox, we have our own styling):
    wp_nonce_field( plugin_basename( __FILE__ ), 'kia_subnonce' );
    //get the subtitle value (if set)
    $sub = get_post_meta( get_the_ID(), 'kia_subtitle', true );
    // echo the inputfield with the value.
    printf(
      '<input type="text" class="widefat" name="subtitle" placeholder="%s" value="%s" id="the_subtitle" tabindex="1"/>',
      __( 'Subtitle', 'kia-subtitle'   ), esc_attr($sub)
     );
  ?>

  <script>
  (function($) { $(document).on( 'keydown', '#title, #the_subtitle', function( e ) {
  var keyCode = e.keyCode || e.which;
  if ( 9 == keyCode){
    e.preventDefault();
    var target = $(this).attr('id') == 'title' ? '#the_subtitle' : 'textarea#content';
    if ( (target === '#the_subtitle') || $('#wp-content-wrap').hasClass('html-active') ) {
      $(target).focus();
    } else {
      tinymce.execCommand('mceFocus',false,'content');
    }
  }
  }); })(jQuery);
  </script>

<?php
} // endif
} // end function

Answer 2

You can also try playing with the focusout Javascript event and the focus() method:

Here is a demo Subtitle plugin: /wp-content/plugins/subtitle/subtitle.php

<?php
/**
 * Plugin Name: Subtitle
 */

function custom_add_input()
{
   // your function code above ...
}

add_action( 'edit_form_after_title', 'custom_add_input' );

function subtitle_script( $hook )
{
        if( in_array( $hook, array( 'edit.php', 'post.php', 'post-new.php' ) ) )
        {
                wp_enqueue_script( 'subtitle-script', 
                                   plugins_url( 'js/script.js' , __FILE__ ), 
                                   array(), 
                                   '1.0.1', 
                                    FALSE 
                                 );
        }
}

add_action( 'admin_enqueue_scripts', 'subtitle_script' );

and here is for example a non-jQuery version for your wp-content/plugins/subtitle/js/script.js file:

// script.js

window.onload = function(){
    // Add event listener to the title input
    document.getElementById('title').addEventListener( 'focusout', focus_on_subtitle, false);

}

function focus_on_subtitle()
{
    document.getElementById( 'the_subtitle' ).focus();
}

My initial jQuery version didn't work, so that's why I tested the non-jQuery version and that works on my install ;-)

Well, this jQuery version seems to work:

jQuery(window).load( function() {
        jQuery('#title').focusout( function() {
                jQuery('#the_subtitle').focus();
        });
});

and this

jQuery(document).ready( function( ){
            jQuery('#title').focusout( function() {
                    jQuery('#the_subtitle').focus();
            });
    });

When the title input text field looses the focus:

it goes to the subtitle input text field.

But maybe it's more user-friendly to only intercept the TAB keycode in the title input text field. With a modification of this code, we can for example use:

jQuery(document).on( 'keydown', '#title', function( event ) {
    var keyCode = event.keyCode || event.which;
    if ( 9 == keyCode){
        event.preventDefault();
        jQuery('#the_subtitle').focus();
    }
});

Answer 3

I made some additions to the final suggestion by @birgire to make this work without knowing the ID of the first field in the after_title area if you're using ACF. If you're not using ACF, just adjust #acf_after_title-sortables .inside > div:first-child to match your after_title area selectors.

// 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
*/

( I also posted it here: https://gist.github.com/petertwise/8ebb6a76f018494fcc62171d622cc85f )