带有离子项目的 ionic 3 应用程序中的键盘未第二次打开

Posted 2023-03-15

【中文标题】带有离子项目的 ionic 3 应用程序中的键盘未第二次打开

【英文标题】：Keyboard not opening second time in ionic 3 app with ion item

【发布时间】：2017-12-07 06:38:30

【问题描述】：

当我点击输入文件时，当我第二次点击输入框时，我的键盘没有出现。如果我将离子输入放在 ion-item 外面，它可以工作，但在 ion item 中，它就不能工作。

<ion-list class='list' [@flyInBottomSlow]="cloudState">
            <div class="box">
                <ion-item class='input-field'>
                    <ion-label floating >
                        <i class="fa fa-user"></i>Employee Code or Email</ion-label>
                    <ion-input  type="text" [(ngModel)]='username'></ion-input>
                </ion-item>

                <ion-item class='input-field'>
                    <ion-label floating>
                        <i class="fa fa-key"></i>Password</ion-label>
                        <ion-input type="password" [(ngModel)]='password'></ion-input>
                </ion-item>

                <ion-item class='item'>
                    <button ion-button class='button' full (tap)="login()">SUBMIT</button>
                </ion-item>

                <ion-item class="forgot-password">
                    <a (click)="forgotPassword()">Forgot Password?</a>
                </ion-item>
            </div>
            <ion-item class="or_row">
                <span>OR</span>
            </ion-item>

            <ion-item class='item'>
                <button ion-button class='button google' full (tap)="loginWithGoogle()">
                    <i class="fa fa-google-plus"></i> LOGIN WITH GOOGLE</button>
            </ion-item>
        </ion-list>

当我点击输入字段时，我应该总是出现。

【问题讨论】：

你说的是哪个字段或输入框？

当我尝试点击密码字段时，设备键盘无法打开。

Employee Code or Email 字段呢？

使用“员工代码或电子邮件字段”工作正常，但在我的所有页面中，无论何时将 ion-input 放在 ion-item 下，有时它有时不会出现。

@Sampath：有什么解决办法吗？

【参考方案1】：

我添加了 disabled false ，现在它正在工作。 喜欢

<ion-item class='input-field'>
                    <ion-label floating>
                        <i class="fa fa-key"></i>Password</ion-label>
                        <ion-input type="password" [(ngModel)]='password' disabled=false></ion-input>
                </ion-item>

注意：这是一个临时解决方案。希望 Ionic 团队调查一下。