web-dev-qa-db-ja.com

WordPressのタイトル入力直後のテキスト入力に対するTabindex

次のコードは、edit_form_after_titleフックを介して、字幕のテキスト入力をタイトル入力の直下のスペースに追加します。しかし、タイトルを編集するときに、Tabキーを押すとカーソルがメインの投稿エディタに移動するので、代わりにタイトルから字幕入力に移動するために使用する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) );
     }
}
custom-fieldpost-editor
6
helgatheviking

@birgireの最後の部分が最も有用な方法であることがわかりましたが、それは tab への可能性を損ないます。実際には、私は通常字幕フィールドにいる間、クリックタブでコンテンツに焦点を当てていると思います。

そのためには、コンテンツが[テキスト]タブまたは[ビジュアル]タブ（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
2
gmazzap

focusout Javascript event と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' );

wp-content/plugins/subtitle/js/script.jsファイルの non-jQuery バージョンは次のようになります。

// 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 バージョンはうまく動かなかったので、私が non-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();
            });
    });

title 入力テキストフィールドがフォーカスを失った場合

after pressing the TAB key

それは 字幕 入力テキストフィールドに行きます。

しかし、おそらくタイトル入力テキストフィールドのTABキーコードを傍受するだけのほうが、より多くの ユーザーフレンドリーな になります。 このコード を変更すると、たとえば次のようになります。

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