Customizer: Update Preview instantly when typing into a number input field

Im working on some customizer settings for my theme. Im using chrome. I created a number input field:

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

The preview updates under 2 circumstances:
– When I use my arrow keys while the number field is selected.
– When I type into the number field and then click outside of it.

I want the preview to update while I’m just typing into the number field. How can I do that?

When I use a normal text input, it updates the preview instantly. But with a number input, it works differently.

Solutions Collecting From Web of "Customizer: Update Preview instantly when typing into a number input field"

This works for me:

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

Use customize_preview_init to enqueue this js.

The reason for the this behavior is due to the underlying wp.customize.Element not being updated to be aware of the HTML5 input types, though the more underlying reason is that it needs to be listening to input events instead of the current approach of deciding whether to use change, keydown or other event handlers. All should now get updated to use input only since that is standard and we don’t have to worry about IE incompatibility anymore. See #35832. Long story short, this should be fixed in a minor release of WordPress relatively soon.