如何让我的键盘进入/开始按钮工作答案

【问题标题】：how to make my keyboard enter/go button work如何让我的键盘进入/开始按钮工作
【发布时间】：2016-11-17 12:23:59
【问题描述】：

请看我的图片。

在我的输入字段中输入数据并单击键盘输入/开始按钮后，它并没有做任何它表现得像理想的事情。

是否有任何插件可以控制键盘（输入、搜索、go..etc）按钮以起到（点击）功能的作用。如何在每个输入字段中激活输入/执行按钮？

更新

这是我的html代码

  <ion-item>
      <ion-label primary floating>Email/Mobile</ion-label>
      <ion-input type="text" [(ngModel)]="loginId" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required></ion-input>
    </ion-item>

    <ion-item>
      <ion-label primary floating>Password</ion-label>
      <ion-input type="password" [(ngModel)]="passwd" required></ion-input>
    </ion-item>

    <p>{{loginMsg}}</p>


  <div padding>
  </div>

  <button ion-button full color="light" (click)="submit();" >LOGIN</button> <br>

  <div class="text" (click)="forgotPasswd()">

  <p > Forgot your password ?</p>
  </div>

  <div padding>
  </div>

  <div class="text-padding-bottom" (click)="registration();">
    <p > No account yet ? <b>Create One</b></p>
  </div>

如果您看到我的页面中有一个输入 type="search" 我可以在键盘上找到搜索按钮，但该按钮也显示理想这是它的代码。

<ion-row>
        <ion-col width-80>
            <ion-item>
                <ion-input type="search" placeholder="search products"[(ngModel)]="searchValue"></ion-input>
            </ion-item>
        </ion-col>
        <ion-col width-20>
            <button ion-button icon-only (click)="searchText();"> 
              <ion-icon name="search"></ion-icon>
            </button>
        </ion-col>
    </ion-row>

【问题讨论】：

表单中有按钮还是只输入字段？
登录按钮之类的两个输入框我在登录页面有三个点击功能
我在我的项目的许多地方都有输入文件，我如何控制键盘按钮，当我点击时应该做什么
您在表单中是否使用了<input type=submit>？
您需要在按钮中添加type="submit"

标签： angular keyboard ionic2

【解决方案1】：

我得到了输出。在表单中复制您的 html 代码并使用(submit) 提交表单。同样如 cmets 中所建议的，我们必须使用 type="submit" 作为应该在键盘 go 按钮上执行的按钮。

<form (submit)="submit()">
<ion-item>
      <ion-label primary floating>Email/Mobile</ion-label>
      <ion-input type="text" [(ngModel)]="loginId" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required></ion-input>
    </ion-item>

    <ion-item>
      <ion-label primary floating>Password</ion-label>
      <ion-input type="password" [(ngModel)]="passwd" required></ion-input>
    </ion-item>

    <p>{{loginMsg}}</p>


  <div padding>
  </div>

  <button ion-button full color="light" type="submit">LOGIN</button> <br>

  <div class="text" (click)="forgotPasswd()">

  <p > Forgot your password ?</p>
  </div>

  <div padding>
  </div>

  <div class="text-padding-bottom" (click)="registration();">
    <p > No account yet ? <b>Create One</b></p>
  </div>
</form>

试试这个。

【讨论】：

如果他们也有移动到表单以激活搜索开始按钮，那么搜索呢
点击键盘上的“go”按钮后如何关闭android键盘？

【解决方案2】：

您也可以通过 KeyPress

事件来做到这一点

<ion-input clear-input (keypress)="eventHandler($event.keyCode)"></ion-input>

并在用户按下设备上的回车键时执行该功能

eventHandler(keyCode) {
  console.log('keyCode: ', keyCode);
  if (keyCode == 13) {
   /* code */
  }
}

【讨论】：

【解决方案3】：

尝试在表单的最后一个ion-input 中使用(keyup.Enter)="confirmForm()"，其中confirmForm() 是您在单击提交表单的按钮时调用的方法；对于此解决方案，您不需要 type="submit" 或 (submit)="fn()" 上的 <form> 元素

【讨论】：