参考示例:import { window } from '@kit.ArkUI'; import { BusinessError } from '@kit.BasicServicesKit'; import { common } from '@kit.AbilityKit'; @Entry @Component struct TestKeyboardPage { controller: TextInputController = new TextInputController() controllerText: TextController = new TextController(); controllerRich: RichEditorController = new RichEditorController(); @State inputValue: string = "" @State inputText: string = "" @State inputTextSelect: string = "" @State inputTextUnSelect: string = "" @State show: boolean = false @State lastCaretPosition: number = 0 @State lastCaretPositionEnd: number = 0 @State selectId: string = 'MySearch' @State isCancelKey: boolean = false; @State isShowKeyboard: boolean = false; @State isFirstKeyboard: boolean = true; @State selectionStartOri: number = 0; @State selectionEndOri: number = 0; // 自定义键盘组件 @Builder CustomKeyboardBuilder() { Column() { Button('x').onClick(() => { // 关闭自定义键盘 this.controller.stopEditing() this.show = !this.show }) Grid() { ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => { GridItem() { Button(item + "") .width(110).onClick(() => { this.inputValue += item }) } }) }.maxCount(3).columnsGap(10).rowsGap(10).padding(5) }.backgroundColor(Color.Blue) .height(1) // .height("30%") // 调试显示软键盘 } aboutToAppear(): void { if (this.isFirstKeyboard) { return; } window.getLastWindow(getContext(this)).then(currentWindow => { // 设置窗口的布局为沉浸式布局 currentWindow.setWindowLayoutFullScreen(true); let property = currentWindow.getWindowProperties(); // 初始化窗口高度 let avoidArea = currentWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_KEYBOARD); // this.scrollHeight = px2vp(property.windowRect.height - avoidArea.bottomRect.height); // 监听软键盘的隐藏和显示 currentWindow.on('avoidAreaChange', data => { if (data.type == window.AvoidAreaType.TYPE_KEYBOARD) { // this.keyHeight = px2vp(data.area.bottomRect.height); // this.scrollHeight = // px2vp(currentWindow.getWindowProperties().windowRect.height - data.area.bottomRect.height); console.info("ah_软键盘隐藏") this.isShowKeyboard = true; if (this.selectionStartOri < this.selectionEndOri) { this.controller.setTextSelection(this.selectionStartOri, this.selectionEndOri) } return; } else { this.isShowKeyboard = false; } }) }) /*let windowClass: window.Window | undefined = undefined; let config: window.Configuration = { name: "test", windowType: window.WindowType.TYPE_DIALOG, ctx: getContext(this) as common.UIAbilityContext }; try { window.createWindow(config, (err: BusinessError, data) => { const errCode: number = err.code; if (errCode) { console.error(`ah Failed to create the window. Cause code: ${err.code}, message: ${err.message}`); return; } windowClass = data; console.info('ah Succeeded in creating the window. Data: ' + JSON.stringify(data)); // windowClass.resize(500, 1000); try { windowClass.on('keyboardHeightChange', (data) => { console.info('ah on: ' + JSON.stringify(data)); }); } catch (exception) { console.error(`an Failed to enable the listener for keyboard height changes. Cause code: ${exception.code}, message: ${exception.message}`); } try { windowClass.off('keyboardHeightChange', (data) => { console.info('ah off : ' + JSON.stringify(data)); }); } catch (exception) { console.error(`Failed to enable the listener for keyboard height changes. Cause code: ${exception.code}, message: ${exception.message}`); } }); } catch (exception) { console.error(`Failed to create the window. Cause code: ${exception.code}, message: ${exception.message}`); }*/ } @Builder RightClickTextCustomMenu() { Column() { Menu() { MenuItemGroup() { MenuItem({ startIcon: $r('app.media.app_icon'), content: "Right Click Menu 1", labelInfo: "" }) .onClick((event) => { this.controllerText.closeSelectionMenu(); }) MenuItem({ startIcon: $r('app.media.app_icon'), content: "Right Click Menu 2", labelInfo: "" }) MenuItem({ startIcon: $r('app.media.app_icon'), content: "Right Click Menu 3", labelInfo: "" }) } } .MenuStyles() } } build() { Column() { // TextInput({ text: this.inputText, placeholder: '输入文本', controller: this.controller }) TextArea({ text: this.inputText, placeholder: '输入文本', controller: this.controller }) .placeholderColor(Color.Grey) .placeholderFont({ size: 14, weight: 400 }) .caretColor(Color.Blue) .width('95%') .height(40) .margin(20) .fontSize(14) .fontColor(Color.Black) .selectedBackgroundColor(Color.Blue)// .customKeyboard(this.CustomKeyboardBuilder()) .customKeyboard(this.isShowKeyboard ? this.CustomKeyboardBuilder() : undefined) .onClick(() => { this.isShowKeyboard = false }) .onBlur(() => { this.isShowKeyboard = true console.log("onBlur: ", this.selectId) let res = focusControl.requestFocus(this.selectId) if (res) { console.log("ah_requestFocus: Request success", this.selectId) } else { console.log("ah_requestFocus: Request failed", this.selectId) } }) .id(this.selectId) .onFocus(() => { //获焦设置光标位置 console.log("ah setTextSelection: ", this.selectionStartOri, this.selectionEndOri) this.controller.setTextSelection(this.selectionStartOri, this.selectionEndOri) }) .onChange((value: string) => { this.inputText = value console.info("ah_输入内容:" + this.inputText + "|value:" + value) }) .onTextSelectionChange((selectionStart: number, selectionEnd: number) => { if (selectionStart != selectionEnd) { // 可使用window.on(‘keyboardHeightChange’)监听键盘高度,判断软键盘的显示与隐藏 文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5 this.inputTextSelect = this.inputText.substring(selectionStart, selectionEnd) this.inputTextUnSelect = this.inputText.substring(0, selectionStart) /*this.inputTextUnSelect = // 以上默认选中后半部分的文本 this.inputTextUnSelect.length != 0 ? this.inputTextUnSelect : this.inputText.substring(selectionStart, this.inputText.length - 1)*/ this.selectionStartOri = selectionStart this.selectionEndOri = selectionEnd } else { // this.controller.setTextSelection(this.selectionStartOri, this.selectionEndOri) // this.controller.setTextSelection(2, 4) console.info("ah_关闭了软键盘:" + this.selectionStartOri + "|end:" + this.selectionEndOri) } console.info(`ah_输入内容->文本选中区域变化回调, selectionStart: ${selectionStart}, selectionEnd: ${selectionEnd}` + "|select:" + this.inputTextSelect); }) Text("选中:" + this.inputTextSelect) .fontSize(24) .fontColor(Color.Blue) .margin(50).onClick(() => { console.info("ah 点击了:" + this.selectionStartOri + "|end:" + this.selectionEndOri); // this.controller.setTextSelection(this.selectionStartOri, this.selectionEndOri)
参考示例: