概述

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

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

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

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

輸入控件綁定自定義鍵盤(pán)布局

自定義鍵盤(pán)輸入控制

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

自定義鍵盤(pán)彈出與收起

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

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

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

輸入控件綁定自定義鍵盤(pán)布局

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

代碼示例如下：

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

自定義鍵盤(pán)輸入控制

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

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

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

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

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

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

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

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

TextInput({
placeholder:'綁定自定義鍵盤(pán)',
text:this.inputText,
controller:this.textInputController
})
// 監(jiān)聽(tīng)光標(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);
 }
}

自定義鍵盤(pán)彈出與收起

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

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

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

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

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

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

自定義鍵盤(pán)的布局避讓

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

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

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

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

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

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

總結(jié)

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