fix(input): copy custom attrs from ion-input to native input

This commit is contained in:
Adam Bradley
2016-02-01 21:57:26 -06:00
parent 015361d5c0
commit 4cfe210a5a
4 changed files with 31 additions and 3 deletions

View File

@ -8,7 +8,7 @@ import {Item} from '../item/item';
import {IonicApp} from '../app/app'; import {IonicApp} from '../app/app';
import {isTrueProperty} from '../../util/util'; import {isTrueProperty} from '../../util/util';
import {Label} from '../label/label'; import {Label} from '../label/label';
import {pointerCoord, hasPointerMoved, closest} from '../../util/dom'; import {pointerCoord, hasPointerMoved, closest, copyInputAttributes} from '../../util/dom';
import {NavController} from '../nav/nav-controller'; import {NavController} from '../nav/nav-controller';
import {NativeInput, NextInput} from './native-input'; import {NativeInput, NextInput} from './native-input';
import {Platform} from '../../platform/platform'; import {Platform} from '../../platform/platform';
@ -132,7 +132,7 @@ export class InputBase {
if (val) { if (val) {
val = val.toLowerCase(); val = val.toLowerCase();
if (/password|email|number|search|tel|url|date|datetime|datetime-local|month|time|week/.test(val)) { if (/password|email|number|search|tel|url|date|month|time|week/.test(val)) {
this._type = val; this._type = val;
} }
} }
@ -175,6 +175,9 @@ export class InputBase {
this.checkHasValue(nativeInput.getValue()); this.checkHasValue(nativeInput.getValue());
this.disabled = this._disabled; this.disabled = this._disabled;
// copy ion-input attributes to the native input element
copyInputAttributes(this._elementRef.nativeElement, nativeInput.element());
} }
/** /**

View File

@ -127,7 +127,7 @@ export class NativeInput {
/** /**
* @private * @private
*/ */
private element(): HTMLInputElement { element(): HTMLInputElement {
return this._elementRef.nativeElement; return this._elementRef.nativeElement;
} }

View File

@ -90,6 +90,17 @@
<ion-input placeholder="Stand-alone textarea"></ion-input> <ion-input placeholder="Stand-alone textarea"></ion-input>
<ion-list> <ion-list>
<ion-item>
<ion-label>Custom Attrs</ion-label>
<ion-input autocomplete="off"
spellcheck="no"
required
some-weird-attr="value"
accept="sure"
class="no-copy" id="no-copy" checked=checked
value="copy custom attributes"></ion-input>
</ion-item>
<ion-item> <ion-item>
<ion-label>Disabled Input</ion-label> <ion-label>Disabled Input</ion-label>
<ion-input disabled value="Value"></ion-input> <ion-input disabled value="Value"></ion-input>

View File

@ -198,6 +198,20 @@ export function hasFocusedTextInput() {
return false; return false;
} }
const skipInputAttrsReg = /^(value|checked|disabled|type|class|style|id)$/i
export function copyInputAttributes(srcElement, destElement) {
// copy attributes from one element to another
// however, skip over a few of them as they're already
// handled in the angular world
let attrs = srcElement.attributes;
for (let i = 0; i < attrs.length; i++) {
var attr = attrs[i];
if (!skipInputAttrsReg.test(attr.name)) {
destElement.setAttribute(attr.name, attr.value);
}
}
}
let matchesFn: string; let matchesFn: string;
let matchesMethods: Array<string> = ['matches','webkitMatchesSelector','mozMatchesSelector','msMatchesSelector']; let matchesMethods: Array<string> = ['matches','webkitMatchesSelector','mozMatchesSelector','msMatchesSelector'];
matchesMethods.some((fn: string) => { matchesMethods.some((fn: string) => {