Javascript 禁用编辑不起作用
我正在使用Javascript 禁用编辑不起作用,javascript,css,ionic-framework,ionic2,searchbar,Javascript,Css,Ionic Framework,Ionic2,Searchbar,我正在使用离子搜索栏,我需要禁用离子搜索栏的编辑模式 我的代码片段- <ion-searchbar [disabled]="true" style="padding: 0" class="add-place-item-divider" [(ngModel)]="mainTrail.source"></ion-searchbar> 但是上面的代码没有按预期工作。请使用css属性指针事件:无,我修改了您的代码。请用下面的替换 <ion-searchbar s
离子搜索栏
,我需要禁用离子搜索栏
的编辑模式
我的代码片段-
<ion-searchbar [disabled]="true" style="padding: 0" class="add-place-item-divider" [(ngModel)]="mainTrail.source"></ion-searchbar>
但是上面的代码没有按预期工作。请使用css属性指针事件:无,我修改了您的代码。请用下面的替换
<ion-searchbar style="pointer-events: none;padding: 0" class="add-place-item-divider" [(ngModel)]="mainTrail.source"></ion-searchbar>
搜索栏上的disable属性不会传递给内部的
输入元素。我想我们可以破解ViewChildren的DOM视图ViewChildren
但是,也有一种方法可以使用Ganesh Pediredla的想法,并实现一种基于指针事件
CSS属性启用/禁用组件的方法
使用属性启用或禁用声明指针事件的CSS类:无;填充:
HTML
组成部分
public disableSearchbar: boolean = true;
toggleSearchbar(status: boolean): void {
this.disableSearchbar = !this.disableSearchbar;
}
这是一个很好的答案,它很有效。你知道如何从组件中启用/禁用搜索栏吗?对于从组件中启用和禁用意味着需要一个清晰的信息或发布一个新的问题并在评论中添加该链接,我将对此进行研究,并将帮助你修复它
.no-pointer-events {
pointer-events: none;
}
public disableSearchbar: boolean = true;
toggleSearchbar(status: boolean): void {
this.disableSearchbar = !this.disableSearchbar;
}