概述

自定義鍵盤是一種替換系統(tǒng)默認(rèn)鍵盤的解決方案，可實(shí)現(xiàn)鍵盤個(gè)性化交互。允許用戶結(jié)合業(yè)務(wù)需求與操作習(xí)慣，對按鍵布局進(jìn)行可視化重構(gòu)、設(shè)置多功能組合鍵位，使輸入更加便捷和舒適。在安全防護(hù)層面，自定義鍵盤可以增強(qiáng)用戶輸入的安全性，避免敏感信息被截取或者泄露。本文介紹了自定義鍵盤的實(shí)現(xiàn)，并結(jié)合自定義鍵盤和系統(tǒng)鍵盤的切換、自定義鍵盤的布局避讓等場景，介紹了自定義鍵盤的實(shí)際使用方式。

自定義鍵盤的實(shí)現(xiàn)

自定義鍵盤的實(shí)現(xiàn)包括以下5個(gè)步驟：

自定義鍵盤布局實(shí)現(xiàn)

輸入控件綁定自定義鍵盤布局

自定義鍵盤輸入控制

自定義鍵盤光標(biāo)控制

自定義鍵盤彈出與收起

自定義鍵盤布局實(shí)現(xiàn)

自定義鍵盤的布局以自定義組件的方式呈現(xiàn)，根據(jù)具體業(yè)務(wù)場景由開發(fā)者實(shí)現(xiàn)。自定義鍵盤的高度通過自定義組件根節(jié)點(diǎn)的height屬性設(shè)置，寬度不可設(shè)置，默認(rèn)鋪滿屏幕。

@Component
exportstructCustomKeyboard{
build() {
 Column() {
  }
 // 修改自定義組件根節(jié)點(diǎn)的height屬性
  .height($r('app.float.keyboard_total_height'))
 }
}

輸入控件綁定自定義鍵盤布局

輸入控件（TextArea、TextInput、RichEditor、Search）支持通過customKeyboard屬性綁定自定義鍵盤布局。綁定自定義鍵盤后，輸入控件獲取焦點(diǎn)時(shí)，不會拉起系統(tǒng)鍵盤，而是加載指定的自定義鍵盤。本文后續(xù)以TextInput控件為例進(jìn)行介紹。

代碼示例如下：

build() {
Column() {
 TextInput({
  placeholder:'綁定自定義鍵盤',
  text:this.inputText,
  controller:this.textInputController
  })
  // 綁定自定義鍵盤布局
   .customKeyboard(this.customKeyboard())
 }
}
@Builder
customKeyboard() {
CustomKeyboard()
}

自定義鍵盤輸入控制

自定義鍵盤可以攔截手勢事件，通過對狀態(tài)變量的修改，實(shí)現(xiàn)文本的輸入。

以英文鍵盤為例，監(jiān)聽EnglishButton的onClick事件，修改狀態(tài)變量。

@Component
struct EnglishButton {
@ConsumeinputText: string;
 build() {
  Button(this.getEnglishText(this.item), { type: ButtonType.Normal })
   .onClick(() => {
   // 攔截自定義鍵盤按鈕的點(diǎn)擊事件，根據(jù)業(yè)務(wù)場景修改狀態(tài)變量
   this.inputText =this.keyBoardController.onInput(this.getEnglishText(this.item));
   })
 }
}

通過對狀態(tài)變量inputText的修改，實(shí)現(xiàn)文本輸入。

@Component
exportstructTextInputComponent{
@ProvideinputText:string='';
build() {
 Column() {
  TextInput({
   placeholder:'綁定自定義鍵盤',
   text:this.inputText,
   controller:this.textInputController
   })
  }
 }
}

自定義鍵盤光標(biāo)控制

通過監(jiān)聽TextInput的onTextSelectionChange生命周期，獲取初始光標(biāo)位置、文本輸入后，調(diào)用TextInputController的caretPosition方法，設(shè)置最終光標(biāo)位置。

獲取光標(biāo)位置：

TextInput({
placeholder:'綁定自定義鍵盤',
text:this.inputText,
controller:this.textInputController
})
// 監(jiān)聽光標(biāo)位置變化
 .onTextSelectionChange((start:number, end:number) =>{
 this.keyBoardController.setCaretPosition(start, end);
 })

設(shè)置光標(biāo)位置：

onChange(value: string) {
this.text = value;
if(this.keyBoardType !== Constants.SYSTEM_KEYBOARD) {
 // 設(shè)置光標(biāo)位置
 this.textInputController?.caretPosition(this.targetCaretPos);
 }
}

自定義鍵盤彈出與收起

通過對焦點(diǎn)進(jìn)行控制，可以實(shí)現(xiàn)鍵盤的彈出和收起。開發(fā)者也可以通過TextInputController的stopEditing方法控制鍵盤關(guān)閉，下面的自定義鍵盤示例中，點(diǎn)擊確認(rèn)按鍵關(guān)閉自定義鍵盤。

onInput(value:string):string{
switch(value) {
 case'確定':
  this.textInputController?.stopEditing();
  break;
 }
returnthis.text;
}

自定義鍵盤和系統(tǒng)鍵盤的切換

當(dāng)需要實(shí)現(xiàn)同一個(gè)輸入框內(nèi)可以切換自定義鍵盤和系統(tǒng)鍵盤時(shí)，可以通過如下方式實(shí)現(xiàn)：

Tab欄點(diǎn)擊“123”、“ABC”按鈕，this.isCustomKeyboardAttach為true，TextInput綁定自定義鍵盤；點(diǎn)擊“中文”按鈕，this.isCustomKeyboardAttach為false，切換系統(tǒng)鍵盤。

TextInput({
 placeholder:'綁定自定義鍵盤',
 text:this.inputText,
 controller:this.textInputController
})
 .customKeyboard(this.isCustomKeyboardAttach ?this.customKeyboard() :null)

自定義鍵盤的布局避讓

使用系統(tǒng)提供的自定義鍵盤避讓功能

為了確保輸入框不被自定義鍵盤擋住，系統(tǒng)默認(rèn)提供了輸入框避讓自定義鍵盤的能力。在TextInput組件的customKeyboard屬性設(shè)置supportAvoidance為true，開啟系統(tǒng)提供的自定義鍵盤避讓功能。

TextInput({
 placeholder:'綁定自定義鍵盤',
 text:this.inputText,
 controller:this.textInputController
})
 .customKeyboard(this.customKeyboard(), { supportAvoidance:true})

系統(tǒng)默認(rèn)的自定義鍵盤避讓功能只能保證輸入框不被遮擋，輸入框下方的組件可能會被自定義鍵盤擋住，如上圖中所示，輸入框下方的tab欄被自定義鍵盤擋住。為解決這一問題，需要開發(fā)者自己實(shí)現(xiàn)自定義鍵盤的避讓功能。

開發(fā)者自己實(shí)現(xiàn)自定義鍵盤的避讓功能

開發(fā)者需要監(jiān)聽自定義鍵盤根節(jié)點(diǎn)的onAreaChange生命周期，獲取自定義鍵盤的高度，根據(jù)實(shí)際場景設(shè)置布局的避讓。

總結(jié)

自定義鍵盤作為可定制化輸入解決方案，通過模塊化架構(gòu)實(shí)現(xiàn)系統(tǒng)鍵盤的功能替代，其核心價(jià)值在于支持按鍵布局的重構(gòu)與界面功能的自定義配置，同時(shí)集成場景化功能擴(kuò)展模塊，顯著提升鍵盤輸入效率與操作舒適度，構(gòu)建輸入數(shù)據(jù)鏈路防護(hù)體系，有效規(guī)避敏感信息泄露風(fēng)險(xiǎn)。