event-valuechange.js revision d6322294cc8480048c5b018858fc1680a027f6de
/**
Adds a synthetic `valueChange` event that fires when the `value` property of an
`<input>` or `<textarea>` node changes as a result of a keystroke, mouse
operation, or input method editor (IME) input event.
Usage:
YUI().use('event-valuechange', function (Y) {
Y.one('#my-input').on('valueChange', function (e) {
Y.log('previous value: ' + e.prevVal);
Y.log('new value: ' + e.newVal);
});
});
@module event-valuechange
**/
/**
Provides the implementation for the synthetic `valueChange` event. This class
isn't meant to be used directly, but is public to make monkeypatching possible.
Usage:
YUI().use('event-valuechange', function (Y) {
Y.one('#my-input').on('valueChange', function (e) {
Y.log('previous value: ' + e.prevVal);
Y.log('new value: ' + e.newVal);
});
});
@class ValueChange
@static
*/
var YArray = Y.Array,
VALUE = 'value',
// Just a simple namespace to make methods overridable.
VC = {
// -- Static Constants -----------------------------------------------------
/**
Interval (in milliseconds) at which to poll for changes to the value of an
element with one or more `valueChange` subscribers when the user is likely
to be interacting with it.
@property POLL_INTERVAL
@type Number
@default 50
@static
**/
POLL_INTERVAL: 50,
/**
Timeout (in milliseconds) after which to stop polling when there hasn't been
any new activity (keypresses, mouse clicks, etc.) on an element.
@property TIMEOUT
@type Number
@default 10000
@static
**/
TIMEOUT: 10000,
// -- Protected Static Properties ------------------------------------------
_history : {},
_intervals: {},
_notifiers: {},
_timeouts : {},
// -- Protected Static Methods ---------------------------------------------
/**
Called at an interval to poll for changes to the value of the specified
node.
@method _poll
@param {Node} node
@param {String} stamp
@param {EventFacade} e
@protected
@static
**/
if (!domNode) {
return;
}
facade = {
_event : e,
};
});
}
},
/**
Restarts the inactivity timeout for the specified node.
@method _refreshTimeout
@param {Node} node
@param {String} stamp
@protected
@static
**/
// If we don't see any changes within the timeout period (10 seconds by
// default), stop polling.
},
/**
Begins polling for changes to the `value` property of the specified node. If
polling is already underway for the specified node, it will not be restarted
unless the _force_ parameter is `true`
@method _startPolling
@param {Node} node Node to watch.
@param {String} [stamp] Object stamp for the node. Will be generated if not
provided (provide it to improve performance).
@param {EventFacade} [e] Event facade of the event that initiated the
polling (if any).
@param {Boolean} [force=false] If `true`, polling will be restarted even if
we're already polling this node.
@protected
@static
**/
if (!stamp) {
}
// Don't bother continuing if we're already polling.
return;
}
// Poll for changes to the node's value. We can't rely on keyboard
// events for this, since the value may change due to a mouse-initiated
// paste event, an IME input event, or for some other reason that
// doesn't trigger a key event.
}, VC.POLL_INTERVAL);
},
/**
Stops polling for changes to the specified node's `value` attribute.
@method _stopPolling
@param {Node} node
@param {String} [stamp]
@protected
@static
**/
if (!stamp) {
}
},
/**
Clears the inactivity timeout for the specified node, if any.
@method _stopTimeout
@param {Node} node
@param {String} [stamp]
@protected
@static
**/
if (!stamp) {
}
},
// -- Protected Static Event Handlers --------------------------------------
/**
Stops polling when a node's blur event fires.
@method _onBlur
@param {EventFacade} e
@protected
@static
**/
_onBlur: function (e) {
},
/**
Resets a node's history and starts polling when a focus event occurs.
@method _onFocus
@param {EventFacade} e
@protected
@static
**/
_onFocus: function (e) {
var node = e.currentTarget;
},
/**
Starts polling when a node receives a keyDown event.
@method _onKeyDown
@param {EventFacade} e
@protected
@static
**/
_onKeyDown: function (e) {
},
/**
Starts polling when an IME-related keyUp event occurs on a node.
@method _onKeyUp
@param {EventFacade} e
@protected
@static
**/
_onKeyUp: function (e) {
// These charCodes indicate that an IME has started. We'll restart
// polling and give the IME up to 10 seconds (by default) to finish.
}
},
/**
Starts polling when a node receives a mouseDown event.
@method _onMouseDown
@param {EventFacade} e
@protected
@static
**/
_onMouseDown: function (e) {
},
/**
Called when the `valueChange` event receives a new subscriber.
@method _onSubscribe
@param {Node} node
@param {Subscription} subscription
@param {SyntheticEvent.Notifier} notifier
@protected
@static
**/
});
if (!notifiers) {
}
},
/**
Called when event-valuechange loses a subscriber.
@method _onUnsubscribe
@param {Node} node
@param {Subscription} subscription
@param {SyntheticEvent.Notifier} notifier
@protected
@static
**/
if (index !== -1) {
}
}
}
};
/**
Synthetic event that fires when the `value` property of an `<input>` or
`<textarea>` node changes as a result of a user-initiated keystroke, mouse
operation, or input method editor (IME) input event.
Unlike the `onchange` event, this event fires when the value actually changes
and not when the element loses focus. This event also reports IME and multi-
stroke input more reliably than `oninput` or the various key events across
browsers.
For performance reasons, only focused nodes are monitored for changes, so
programmatic value changes on nodes that don't have focus won't be detected.
@example
YUI().use('event-valuechange', function (Y) {
Y.one('#my-input').on('valueChange', function (e) {
Y.log('previous value: ' + e.prevVal);
Y.log('new value: ' + e.newVal);
});
});
@event valueChange
@param {String} prevVal Previous value prior to the latest change.
@param {String} newVal New value after the latest change.
@for YUI
**/
emitFacade: true
}
});
Y.ValueChange = VC;