mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 20:33:32 +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 {isTrueProperty} from '../../util/util';
|
||||
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 {NativeInput, NextInput} from './native-input';
|
||||
import {Platform} from '../../platform/platform';
|
||||
@ -132,7 +132,7 @@ export class InputBase {
|
||||
if (val) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
@ -175,6 +175,9 @@ export class InputBase {
|
||||
|
||||
this.checkHasValue(nativeInput.getValue());
|
||||
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 element(): HTMLInputElement {
|
||||
element(): HTMLInputElement {
|
||||
return this._elementRef.nativeElement;
|
||||
}
|
||||
|
||||
|
@ -90,6 +90,17 @@
|
||||
<ion-input placeholder="Stand-alone textarea"></ion-input>
|
||||
|
||||
<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-label>Disabled Input</ion-label>
|
||||
<ion-input disabled value="Value"></ion-input>
|
||||
|
@ -198,6 +198,20 @@ export function hasFocusedTextInput() {
|
||||
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 matchesMethods: Array<string> = ['matches','webkitMatchesSelector','mozMatchesSelector','msMatchesSelector'];
|
||||
matchesMethods.some((fn: string) => {
|
||||
|
Reference in New Issue
Block a user