使用 Angular 自动清除 ShadowDOM 中元素的输入?
Automatically clear input from an element within ShadowDOM using Angular?
我正在使用 Ionic 创建自动完成输入,但浏览器使用无效数据自动填充输入时遇到问题。我需要能够使用 Angular 清除它。
PS:我加了automcomplete="off"
但是没有被尊重
下面是 Ionic 的 ion-input
的 HTML,我试图将其作为目标:
<ion-input #inputElem
[autocomplete]="enableBrowserAutoComplete ? 'on' : 'off'"
[name]="name"
(keyup)="getItems($event)"
(tap)="handleTap($event)"
[(ngModel)]="keyword"
(ngModelChange)="updateModel($event)"
(ionFocus)="onFocus($event)"
(ionBlur)="onBlur($event)"></ion-input>
在我的组件中,我有 updateModel()
功能,它检查输入的变化并在输入无效时将其清除。但是,angular 的更改检测不会注意到浏览器是否自动填充。
或者,如果您在控制台中操作它:
$('input.searchbar-input.sc-ion-searchbar-md').value = 'J'
因此,如果没有有效的选择,我正在尝试找到一种清除关键字的方法。我最成功的尝试是使用OnChanges
、DoCheck
和AfterViewCheck
等生命周期钩子,但清除关键字是不够的。我必须清除阴影 dom 内的输入,因为该值尚未传播。所以在函数中我必须使用承诺来获取元素(我怀疑这是真正的问题)。其中 "works" 只要我在生命周期函数内保留一个断点。第二个我删除断点浏览器选项卡完全冻结。
@ViewChild(
'inputElem',
{
read: ElementRef,
static: false
}
)
private inputElem:ElementRef;
[..]
ngOnChanges():void {
if (!this.hasFocus) {
if (this.clearInvalidInput && this.selected === null) {
if (this.keyword !== '') {
this.keyword = '';
}
if (this.inputElem && this.inputElem.nativeElement) {
this.inputElem.nativeElement.getInputElement().then(
(element) => {
if (element.value !== '') {
element.value = '';
}
}
);
}
}
}
}
我已经发布了一个变通方法作为答案,但我将其保持打开状态,因为它感觉很老套。
我找到了解决方法,但这不是首选解决方案。
ngDoCheck() {
if (this.inputElem && this.inputElem.nativeElement) {
if (this.inputElem.nativeElement.children && this.inputElem.nativeElement.children.length !== 0) {
if (this.inputElem.nativeElement.children[0].children && this.inputElem.nativeElement.children[0].children.length !== 0) {
if (this.inputElem.nativeElement.children[0].children[0].value) {
this.inputElem.nativeElement.children[0].children[0].value = '';
}
}
}
}
}
我正在使用 Ionic 创建自动完成输入,但浏览器使用无效数据自动填充输入时遇到问题。我需要能够使用 Angular 清除它。
PS:我加了automcomplete="off"
但是没有被尊重
下面是 Ionic 的 ion-input
的 HTML,我试图将其作为目标:
<ion-input #inputElem
[autocomplete]="enableBrowserAutoComplete ? 'on' : 'off'"
[name]="name"
(keyup)="getItems($event)"
(tap)="handleTap($event)"
[(ngModel)]="keyword"
(ngModelChange)="updateModel($event)"
(ionFocus)="onFocus($event)"
(ionBlur)="onBlur($event)"></ion-input>
在我的组件中,我有 updateModel()
功能,它检查输入的变化并在输入无效时将其清除。但是,angular 的更改检测不会注意到浏览器是否自动填充。
或者,如果您在控制台中操作它:
$('input.searchbar-input.sc-ion-searchbar-md').value = 'J'
因此,如果没有有效的选择,我正在尝试找到一种清除关键字的方法。我最成功的尝试是使用OnChanges
、DoCheck
和AfterViewCheck
等生命周期钩子,但清除关键字是不够的。我必须清除阴影 dom 内的输入,因为该值尚未传播。所以在函数中我必须使用承诺来获取元素(我怀疑这是真正的问题)。其中 "works" 只要我在生命周期函数内保留一个断点。第二个我删除断点浏览器选项卡完全冻结。
@ViewChild(
'inputElem',
{
read: ElementRef,
static: false
}
)
private inputElem:ElementRef;
[..]
ngOnChanges():void {
if (!this.hasFocus) {
if (this.clearInvalidInput && this.selected === null) {
if (this.keyword !== '') {
this.keyword = '';
}
if (this.inputElem && this.inputElem.nativeElement) {
this.inputElem.nativeElement.getInputElement().then(
(element) => {
if (element.value !== '') {
element.value = '';
}
}
);
}
}
}
}
我已经发布了一个变通方法作为答案,但我将其保持打开状态,因为它感觉很老套。
我找到了解决方法,但这不是首选解决方案。
ngDoCheck() {
if (this.inputElem && this.inputElem.nativeElement) {
if (this.inputElem.nativeElement.children && this.inputElem.nativeElement.children.length !== 0) {
if (this.inputElem.nativeElement.children[0].children && this.inputElem.nativeElement.children[0].children.length !== 0) {
if (this.inputElem.nativeElement.children[0].children[0].value) {
this.inputElem.nativeElement.children[0].children[0].value = '';
}
}
}
}
}