Wordpress - Tabindex on text input immediately after WordPress title input

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();
    }
});

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