# 如何给不同输入框绑定不同的自定义键盘

1.  为不同的输入框定义相应的控制器。
    
    ```
    private controller: TextInputController = new TextInputController();
    private controller1: TextInputController = new TextInputController();
    ```
    
2.  定义键盘组件。
    
    ```
    // Customize keyboard components
    @Component
    export struct CustomKeyboardBuilder {
      controller?: TextInputController = new TextInputController();
      index: number = 0;
      @Link inputValue: string
    
      build() {
        Column() {
          // ...
        }
      }
    }
    ```
    
3.  给TextInput组件添加customKeyboard属性，绑定自定义键盘。
    
    ```
    TextInput({ controller: this.controller, text: this.inputValue })// Bind custom keyboard
      .customKeyboard(this.CustomKeyboardBuilder()).margin(10).border({ width: 1 }).height('48vp')
    ```
    
    参考以下代码：
    
    ```
    @Entry
    @Component
    struct TextInputExample {
      controller: TextInputController = new TextInputController();
      @State inputValue: string = '';
      controller1: TextInputController = new TextInputController();
      @State inputValue1: string = '';
      controller2: TextInputController = new TextInputController();
      @State inputValue2: string = '';
    
    
      build() {
        Column() {
          this.input({ inputValue: this.inputValue, controller: this.controller, index: 0 });
          this.input({ inputValue: this.inputValue1, controller: this.controller1, index: 1 });
          this.input({ inputValue: this.inputValue2, controller: this.controller2, index: 2 });
        }
      }
    
    
      @Builder
      input(tmp: Tmp) {
        if (tmp.index === 0) {
          TextInput({ controller: tmp.controller, text: tmp.inputValue })
            .customKeyboard(this.keyboard())
            .margin(10)
            .border({ width: 1 })
            .height('48vp')
        } else if (tmp.index === 1) {
          TextInput({ controller: tmp.controller, text: tmp.inputValue })
            .customKeyboard(this.keyboard1())
            .margin(10)
            .border({ width: 1 })
            .height('48vp')
        } else {
          TextInput({ controller: tmp.controller, text: tmp.inputValue })
            .customKeyboard(this.keyboard2())
            .margin(10)
            .border({ width: 1 })
            .height('48vp')
        }
      }
    
    
      @Builder
      keyboard() {
        CustomKeyboardBuilder({ inputValue: this.inputValue, controller: this.controller, index: 0 });
      }
    
    
      @Builder
      keyboard1() {
        CustomKeyboardBuilder({ inputValue: this.inputValue1, controller: this.controller1, index: 1 });
      }
    
    
      @Builder
      keyboard2() {
        CustomKeyboardBuilder({ inputValue: this.inputValue2, controller: this.controller2, index: 2 });
      }
    }
    
    
    class Tmp {
      inputValue?: string;
      controller?: TextInputController;
      index?: number;
    }
    
    
    // Customize keyboard components
    @Component
    export struct CustomKeyboardBuilder {
      controller?: TextInputController = new TextInputController();
      index: number = 0;
      @Link inputValue: string;
    
    
      build() {
        Column() {
          Button('x').onClick(() => {
            // Turn off custom keyboard
            this.controller?.stopEditing();
          })
          Grid() {
            ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => {
              GridItem() {
                Button(item + '')
                  .backgroundColor(this.index === 0 ? Color.Blue :
                    (this.index === 1 ? Color.Green : Color.Red))
                  .width(110)
                  .onClick(() => {
                    this.inputValue += item;
                  })
              }
            })
          }
          .maxCount(3)
          .columnsGap(10)
          .rowsGap(10)
          .padding(5)
        }
        .backgroundColor(Color.Gray)
      }
    }
    ```