Tabindex on text input immediately after WordPress title input

3 comments

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
   

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

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 )

Comments are closed.