custom field - Tabindex on text input immediately after WordPress title input

admin管理员组

文章数量:1334818

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

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

• custom-field
• post-editor

Share Improve this question asked Dec 16, 2013 at 9:51 helgathevikinghelgatheviking 14.5k88 gold badges6464 silver badges115115 bronze badges 3

• The focus is controlled by a blur event, if I remember that correctly. You could try to replace this event with your own. – fuxia ♦ Commented Dec 17, 2013 at 7:16
• @toscho do you have any idea what script that might be in, so I could take a look? – helgatheviking Commented Dec 19, 2013 at 8:49
• The answers below are cool, but they appear to require 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 to the edit_form_after_title area. 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 Commented Jan 31, 2018 at 16:33

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 2 +100

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

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 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/a/17150138/947370
@gdoron-is-supporting-monica https://stackoverflow/a/11278006/947370
@birgire https://wordpress.stackexchange/a/127042/41488
*/

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

本文标签： custom fieldTabindex on text input immediately after WordPress title input