# 如何解决切换输入框导致输入法重复拉起问题

#### 问题现象

在面对多组输入框场景时如用户名、密码、验证码，点击输入法键盘上的下一步跳转至下一个输入框，输入法会先隐藏再弹起，影响使用体验，如何解决该问题？

#### 效果预览

#### 背景知识

TextInput中，按下输入法回车键会触发onSubmit()回调。onSubmit()回调函数一共有两个入参：EnterKeyType和SubmitEvent。其中EnterKeyType决定回车键的类型如next、done等，SubmitEvent则是用户提交事件，只有keepEditableState()方法。

#### 问题定位

1.  查看是否调用了focusControl.requestFocus方法导致TextInput组件失焦。
2.  查看是否调用了keepEditableState()方法避免输入法键盘关闭。

#### 分析结论

输入法隐藏再弹起是因为执行focusControl.requestFocus方法时焦点转移到其他组件产生暂时失焦。

#### 修改建议

*   通过给TextInput组件的onSubmit()方法里添加可选入参SubmitEvent，并在onSubmit()中添加SubmitEvent.keepEditableState()方法，可以阻止输入法在失焦情况下关闭，实现输入法键盘在切换编辑栏时保持状态不关闭。
*   但是遇到最后一个输入框时使用keepEditableState()方法会导致输入法键盘无法通过回车键关闭。所以可在该方法外面嵌套一层对于EnterKeyType判断，若EnterKeyType为next则执行keepEditableState()方法，若EnterKeyType为done则不执行。

```
@Entry
@Component
struct TextInputExample {
  private keyNo: number = 1;

  build() {
    Column({ space: 10 }) {
      TextInput({ placeholder: 'please input' })
        .id('code1')
        .enterKeyType(EnterKeyType.Next)
        .onSubmit((enterKey: EnterKeyType, event: SubmitEvent) => {
          let nextKeyNo: number = this.keyNo + 1;
          let nextKeyStr: string = 'code' + nextKeyNo;
          this.getUIContext()
            .getFocusController()
            .requestFocus(nextKeyStr); // focusControl.requestFocus()调用此接口可以主动让焦点转移至指定id的组件
          if (enterKey == EnterKeyType.Next) {
            event.keepEditableState(); // 如果回车键类型为Next则保持输入框不隐藏
          };
        })
      TextInput({ placeholder: 'please input' })
        .id('code2')
        .enterKeyType(EnterKeyType.Next)
        .onSubmit((enterKey: EnterKeyType, event: SubmitEvent) => {
          let nextKeyNo: number = this.keyNo + 2;
          let nextKeyStr: string = 'code' + nextKeyNo;
          this.getUIContext()
            .getFocusController()
            .requestFocus(nextKeyStr); // focusControl.requestFocus()调用此接口可以主动让焦点转移至指定id的组件
          if (enterKey == EnterKeyType.Next) {
            event.keepEditableState(); // 如果回车键类型为Next则保持输入框不隐藏
          };
        })
      TextInput({ placeholder: 'please input' })
        .id('code3')
        .enterKeyType(EnterKeyType.Next)
        .onSubmit((enterKey: EnterKeyType, event: SubmitEvent) => {
          if (enterKey == EnterKeyType.Next) {
            event.keepEditableState(); // 如果回车键类型为Next则保持输入框不隐藏
          };
        })
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
    .padding(15)
  }
}
```