| Index: third_party/polymer/v0_8/components/iron-input/iron-input.html
|
| diff --git a/third_party/polymer/v0_8/components/iron-input/iron-input.html b/third_party/polymer/v0_8/components/iron-input/iron-input.html
|
| index e05fd9ace943b8b52f291242b7ccb6b30c98ca9d..623a605974f21ef587a7f26f83bce8567c8733ee 100644
|
| --- a/third_party/polymer/v0_8/components/iron-input/iron-input.html
|
| +++ b/third_party/polymer/v0_8/components/iron-input/iron-input.html
|
| @@ -9,8 +9,16 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
| -->
|
|
|
| <link rel="import" href="../polymer/polymer.html">
|
| +<link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
|
| +
|
| +<script>
|
| +
|
| +/*
|
| +`<iron-input>` adds two-way binding and custom validators using `Polymer.IronValidatorBehavior`
|
| +to `<input>`.
|
| +
|
| +### Two-way binding
|
|
|
| -<!--
|
| By default you can only get notified of changes to an `input`'s `value` due to user input:
|
|
|
| <input value="{{myValue::input}}">
|
| @@ -20,8 +28,24 @@ for two-way data binding. `bind-value` will notify if it is changed either by us
|
|
|
| <input is="iron-input" bind-value="{{myValue}}">
|
|
|
| --->
|
| -<script>
|
| +### Custom validators
|
| +
|
| +You can use custom validators that implement `Polymer.IronValidatorBehavior` with `<iron-input>`.
|
| +
|
| + <input is="iron-input" validator="my-custom-validator">
|
| +
|
| +### Stopping invalid input
|
| +
|
| +It may be desirable to only allow users to enter certain characters. You can use the
|
| +`prevent-invalid-input` and `allowed-pattern` attributes together to accomplish this. This feature
|
| +is separate from validation, and `allowed-pattern` does not affect how the input is validated.
|
| +
|
| + <!-- only allow characters that match [0-9] -->
|
| + <input is="iron-input" prevent-invaild-input allowed-pattern="[0-9]">
|
| +
|
| +@hero hero.svg
|
| +@demo demo/index.html
|
| +*/
|
|
|
| Polymer({
|
|
|
| @@ -29,6 +53,10 @@ for two-way data binding. `bind-value` will notify if it is changed either by us
|
|
|
| extends: 'input',
|
|
|
| + behaviors: [
|
| + Polymer.IronValidatableBehavior
|
| + ],
|
| +
|
| properties: {
|
|
|
| /**
|
| @@ -40,13 +68,21 @@ for two-way data binding. `bind-value` will notify if it is changed either by us
|
| },
|
|
|
| /**
|
| - * Set to true to prevent the user from entering invalid input or setting
|
| - * invalid `bindValue`.
|
| + * Set to true to prevent the user from entering invalid input. The new input characters are
|
| + * matched with `allowedPattern` if it is set, otherwise it will use the `pattern` attribute if
|
| + * set, or the `type` attribute (only supported for `type=number`).
|
| */
|
| preventInvalidInput: {
|
| type: Boolean
|
| },
|
|
|
| + /**
|
| + * Regular expression to match valid input characters.
|
| + */
|
| + allowedPattern: {
|
| + type: String
|
| + },
|
| +
|
| _previousValidInput: {
|
| type: String,
|
| value: ''
|
| @@ -55,40 +91,98 @@ for two-way data binding. `bind-value` will notify if it is changed either by us
|
| },
|
|
|
| listeners: {
|
| - 'input': '_onInput'
|
| + 'input': '_onInput',
|
| + 'keydown': '_onKeydown'
|
| + },
|
| +
|
| + get _patternRegExp() {
|
| + var pattern;
|
| + if (this.allowedPattern) {
|
| + pattern = new RegExp(this.allowedPattern);
|
| + } else if (this.pattern) {
|
| + pattern = new RegExp(this.pattern);
|
| + } else {
|
| + switch (this.type) {
|
| + case 'number':
|
| + pattern = /[0-9.,e-]/;
|
| + break;
|
| + }
|
| + }
|
| + return pattern;
|
| },
|
|
|
| ready: function() {
|
| - this._validateValue();
|
| this.bindValue = this.value;
|
| },
|
|
|
| _bindValueChanged: function() {
|
| - // If this was called as a result of user input, then |_validateValue|
|
| - // has already been called in |_onInput|, and it doesn't need to be
|
| - // called again.
|
| - if (this.value != this.bindValue) {
|
| + if (this.value !== this.bindValue) {
|
| this.value = this.bindValue;
|
| - this._validateValue();
|
| }
|
| -
|
| // manually notify because we don't want to notify until after setting value
|
| this.fire('bind-value-changed', {value: this.bindValue});
|
| },
|
|
|
| _onInput: function() {
|
| - this._validateValue();
|
| + this.bindValue = this.value;
|
| + },
|
| +
|
| + _isPrintable: function(keyCode) {
|
| + var printable =
|
| + (keyCode > 47 && keyCode < 58) || // number keys
|
| + keyCode == 32 || keyCode == 13 || // spacebar & return key
|
| + (keyCode > 64 && keyCode < 91) || // letter keys
|
| + (keyCode > 95 && keyCode < 112) || // numpad keys
|
| + (keyCode > 185 && keyCode < 193) || // ;=,-./` (in order)
|
| + (keyCode > 218 && keyCode < 223); // [\]' (in order)
|
| + return printable;
|
| },
|
|
|
| - _validateValue: function() {
|
| - var value;
|
| - if (this.preventInvalidInput && !this.validity.valid) {
|
| - value = this._previousValidInput;
|
| + // convert printable numpad keys to number keys
|
| + _correctNumpadKeys: function(keyCode) {
|
| + return (keyCode > 95 && keyCode < 112) ? keyCode - 48 : keyCode;
|
| + },
|
| +
|
| + _onKeydown: function(event) {
|
| + if (!this.preventInvalidInput && this.type !== 'number') {
|
| + return;
|
| + }
|
| + var regexp = this._patternRegExp;
|
| + if (!regexp) {
|
| + return;
|
| + }
|
| + var thisChar = String.fromCharCode(this._correctNumpadKeys(event.keyCode));
|
| + if (this._isPrintable(event.keyCode) && !regexp.test(thisChar)) {
|
| + event.preventDefault();
|
| + }
|
| + },
|
| +
|
| + /**
|
| + * Returns true if `value` is valid. The validator provided in `validator` will be used first,
|
| + * then any constraints.
|
| + * @return {Boolean} True if the value is valid.
|
| + */
|
| + validate: function() {
|
| + // Empty, non-required input is valid.
|
| + if (!this.required && this.value == '')
|
| + return true;
|
| +
|
| + var valid;
|
| + if (this.hasValidator()) {
|
| + valid = Polymer.IronValidatableBehavior.validate.call(this, this.value);
|
| } else {
|
| - value = this._previousValidInput = this.value;
|
| + this.invalid = !this.validity.valid;
|
| + valid = this.validity.valid;
|
| }
|
| - this.bindValue = this.value = value;
|
| + this.fire('iron-input-validate');
|
| + return valid;
|
| }
|
|
|
| - })
|
| + });
|
| +
|
| + /*
|
| + The `iron-input-validate` event is fired whenever `validate()` is called.
|
| + @event iron-input-validate
|
| + */
|
| +
|
| </script>
|
|
|