web-dev-qa-db-ja.com

カスタマイザ：数値入力フィールドに入力すると即座にプレビューが更新される

私のテーマのカスタマイザ設定に取り組んでいます。クロムを使用しています。数値入力フィールドを作成しました。

$wp_customize->add_setting( 'st_opacity',
   array(
      'default' => '100',
      'type' => 'theme_mod',
      'capability' => 'edit_theme_options',
      'transport' => 'postMessage',
   ) 
);      
$wp_customize->add_control( new WP_Customize_Control(
   $wp_customize,
   'st_opacity',
   array(
      'label' => 'Opacity (%)',
      'section' => 'sitetitle_options',
      'settings' => 'st_opacity',
      'type' => 'number',
      'input_attrs' => array('min' => '0', 'max' => '100'),
      'priority' => 41,
   )
) );

2つの状況でプレビューが更新されます。 - 数字フィールドが選択されているときに矢印キーを使用すると。 - 数字フィールドに入力して、その外側をクリックしたとき。

数字フィールドに入力している間にプレビューを更新する必要があります。どうやってやるの？

通常のテキスト入力を使用すると、プレビューが即座に更新されます。しかし、数字を入力すると、動作が異なります。

theme-customizer
1
user3159159

この振る舞いの理由は、基礎となるwp.customize.ElementがHTML5入力タイプを認識するように更新されていないためです。もっとも根本的な理由は、現在のinputを使用するかどうかを決めるのではなくchangeイベントをリスニングする必要があるということです。 、keydownまたは他のイベントハンドラ。これは標準であり、IEの非互換性についてはもう心配する必要はないため、すべてがinputを使用するように更新されます。 ＃35832 を参照してください。長い話を簡単に言えば、これはWordPressのマイナーリリースで比較的近いうちに修正されるはずです。

1
Weston Ruter

これは私のために働く：

jQuery(document).ready(function(){
    setTimeout(function() {
        jQuery('input[type="number"]', window.parent.document).on('keyup', function(){
           window.parent.jQuery(this, window.parent.document).trigger('change'); 
        });
    }, 0);
});

このjsをエンキューするには、 customize_preview_init を使用します。

1
user3159159