Ionic2 Ion-Input onSubmit 单击表单内的顶部按钮

Posted 2023-03-14

【中文标题】Ionic2 Ion-Input onSubmit 单击表单内的顶部按钮

【英文标题】：Ionic2 Ion-Input onSubmit clicks top button inside a form

【发布时间】：2017-03-23 10:58:08

【问题描述】：

我有一个包含离子按钮和离子输入的表单。

离子按钮不用于表单提交。如果我想在输入中编辑一个值并按 OK，我希望键盘隐藏，但离子按钮会对此事件做出反应并打开他的 onClick 操作。

您可以在 Plunkr (home.html/ts) 中找到一个演示，并且可以在输入元素内按 enter 时重现它。我只是想避免触发 gotoSelectedView 函数。

       <form [ngFormModel]="form">
            <ion-list>
                <ion-item>
                    <ion-label floating>Username</ion-label>
                    <ion-input ngControl="username" type="text"></ion-input>
                </ion-item>

                <ion-item>
                    <ion-label floating>Password</ion-label>
                    <ion-input ngControl="password" type="password"></ion-input>
                </ion-item>
                  <button ion-item  (click)="gotoSelectView()">
                      <ion-label >SelectItem</ion-label>
                      <ion-note item-right>SelectedValue</ion-note>
                  </button>
            </ion-list>
        </form>

提前致谢！

【问题讨论】：

你有任何代码 sn-p 显示这个吗？

【参考方案1】：

我通过在keydown.enter 的表单上添加一个侦听器来修复它 在 main.html 中：

 <form [ngFormModel]="form" (keydown.enter)="hideKeyboard($event)">
        <ion-list>
            <ion-item>
                <ion-label floating>Username</ion-label>
                <ion-input ngControl="username" type="text"></ion-input>
            </ion-item>

            <ion-item>
                <ion-label floating>Password</ion-label>
                <ion-input ngControl="password" type="password"></ion-input>
            </ion-item>
              <button ion-item  (click)="gotoSelectView()">
                  <ion-label >SelectItem</ion-label>
                  <ion-note item-right>SelectedValue</ion-note>
              </button>
        </ion-list>
    </form>

在 main.ts 中：

  hideKeyboard(event) 
    event.preventDefault();
    Keyboard.close();