Customize: Use `input` event instead of `keyup` or `propertychange` events when listening for changes in `wp.customize.Element` instances.

Ensures that a control's `Element` is updated in response to pasting into the field. Also fixes issue where inputs using "new" HTML5 types (like `url` and `number`) were not updating in the preview during keystrokes. The use of `input` was previously blocked due to needing to support IE9, but this is no longer a concern since IE<11 is no longer supported.

See #38845, #28477.
Fixes #35832.


git-svn-id: https://develop.svn.wordpress.org/trunk@41387 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Weston Ruter 2017-09-18 19:10:38 +00:00
parent 2ff66f7c50
commit 6c8b9adeee
1 changed files with 8 additions and 16 deletions

View File

@ -551,34 +551,26 @@ window.wp = window.wp || {};
this.element = api.ensure( element ); this.element = api.ensure( element );
this.events = ''; this.events = '';
if ( this.element.is('input, select, textarea') ) { if ( this.element.is( 'input, select, textarea' ) ) {
this.events += 'change'; type = this.element.prop( 'type' );
this.events += ' change input';
synchronizer = api.Element.synchronizer.val; synchronizer = api.Element.synchronizer.val;
if ( this.element.is('input') ) { if ( this.element.is( 'input' ) && api.Element.synchronizer[ type ] ) {
type = this.element.prop('type'); synchronizer = api.Element.synchronizer[ type ];
if ( api.Element.synchronizer[ type ] ) {
synchronizer = api.Element.synchronizer[ type ];
}
if ( 'text' === type || 'password' === type ) {
this.events += ' keyup';
} else if ( 'range' === type ) {
this.events += ' input propertychange';
}
} else if ( this.element.is('textarea') ) {
this.events += ' keyup';
} }
} }
api.Value.prototype.initialize.call( this, null, $.extend( options || {}, synchronizer ) ); api.Value.prototype.initialize.call( this, null, $.extend( options || {}, synchronizer ) );
this._value = this.get(); this._value = this.get();
update = this.update; update = this.update;
refresh = this.refresh; refresh = this.refresh;
this.update = function( to ) { this.update = function( to ) {
if ( to !== refresh.call( self ) ) if ( to !== refresh.call( self ) ) {
update.apply( this, arguments ); update.apply( this, arguments );
}
}; };
this.refresh = function() { this.refresh = function() {
self.set( refresh.call( self ) ); self.set( refresh.call( self ) );