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

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)
      }
    }