mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
fix(input): copy custom attrs from ion-input to native input
This commit is contained in:
@ -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());
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -127,7 +127,7 @@ export class NativeInput {
|
|||||||
/**
|
/**
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
private element(): HTMLInputElement {
|
element(): HTMLInputElement {
|
||||||
return this._elementRef.nativeElement;
|
return this._elementRef.nativeElement;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
@ -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) => {
|
||||||
|
Reference in New Issue
Block a user