HarmonyOS 收起输入法时,如何不取消显示文字选中态、菜单?

如题:HarmonyOS 收起输入法时,如何不取消显示文字选中态、菜单?

阅读 506
1 个回答

参考示例:

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)
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进