在WordPress标题输入后紧跟文本输入上的Tabindex

时间：2013-12-16 作者：helgatheviking

以下代码通过将字幕的文本输入添加到标题输入正下方的空间中edit_form_after_title 钩但是，编辑标题时，按tab键会将光标移动到主post编辑器，我不知道应该使用什么tabindex（或其他方法，如果可用）来从标题切换到我的字幕输入。

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

3 个回复

最合适的回答,由SO网友:gmazzap 整理而成

我发现@birgire答案的最后一部分是最有用的方法，但是它打破了将标签添加到内容的可能性。事实上，我认为在字幕字段中，通过单击选项卡来聚焦内容是正常的。

要做到这一点，您还必须注意内容是否显示在“文本”选项卡或“视觉”选项卡（TynyMCE）中。

我将代码内联到函数中，但您可以使用wp_enqueue_script 或者将其添加到已在编辑后屏幕中排队的某个javascript文件中。

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

SO网友:birgire

您也可以尝试使用focusout Javascript事件和focus() 方法：

这是一个演示Subtitle 插件：/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\' );

下面是一个非jQuery版本的示例wp-content/plugins/subtitle/js/script.js 文件：

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

我最初的jQuery版本不起作用，所以我测试了非jQuery版本，并且可以在我的安装中使用；-）

好吧，这个jQuery版本似乎可以工作：

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

还有这个

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

当标题输入文本字段失去焦点时：

after pressing the TAB key

它转到“subtitle”（字幕）输入文本字段。

但也许只拦截TAB 标题输入文本字段中的键代码。修改为this code, 例如，我们可以使用：

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

SO网友:squarecandy

我对@birgire的最终建议做了一些补充，如果您使用的是ACF，则在不知道after\\u标题区域中第一个字段的ID的情况下完成这项工作。如果您不使用ACF，只需调整#acf_after_title-sortables .inside > div:first-child 与您的after_title 区域选择器。

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

（我也把它贴在这里：https://gist.github.com/petertwise/8ebb6a76f018494fcc62171d622cc85f )

结束

小码农CODE

在WordPress标题输入后紧跟文本输入上的Tabindex

相关推荐