HarmonyOS 鸿蒙Next 想要实现TextInput组件的光标一直展示?

发布于 1周前 作者 vueper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 想要实现TextInput组件的光标一直展示? 我现在做的系统键盘和自定义键盘切换,输入的内容可以传给上面的TextInput,但是光标展示不出来的!有啥办法吗?

想要上面的TextInput一直展示光标,或者有什么办法可以绘制一个光标。

cke_3683.jpeg

import { inputMethod } from '@kit.IMEKit';

@Entry
@Component
struct TestPage {
  @State codeText: string = "";
  private readonly verifyID: string = "keyboard";
  private readonly keyboardSystemID: string = "keyboardSystemID";
  private readonly keyboardCustomID: string = "keyboardCustomID";
  private inputController: inputMethod.InputMethodController = inputMethod.getController();
  private textConfig: inputMethod.TextConfig = {
    inputAttribute: {
      textInputType: inputMethod.TextInputType.TEXT,
      enterKeyType: inputMethod.EnterKeyType.NONE
    },
  };
  private isListen: boolean = false;
  controller: SearchController = new SearchController()
  private keyboardSystem: boolean = false;
  private keyboardCustom: boolean = true;
  private keyboardType: boolean = true

  build() {
    Column() {
      TextInput({ placeholder: '请输入', text: this.codeText })
        .onClick(() => {
          if (this.keyboardType) {
            this.getUIContext().getFocusController().requestFocus(this.keyboardSystemID)
          } else {
            this.getUIContext().getFocusController().requestFocus(this.keyboardCustomID)
          }
        })

      Text('中文键盘')
        .width(100)
        .height(50)
        .textAlign(TextAlign.Center)
        .border({ width: 1, color: '#C0C0C0' })
        .defaultFocus(this.keyboardSystem)
        .onFocus(() => {
          this.attachAndListen();
        })
        .onBlur(() => {
          this.off();
        })
        .onClick(() => {
          this.controller.stopEditing()
          this.attachAndListen();
        })
        .id(this.keyboardSystemID)

      Stack() {
        TextInput({ controller: this.controller, text: '股票键盘' })
          .caretColor('#00000000')
          .border({ width: 1, color: '#C0C0C0', radius: 0 })
          .defaultFocus(this.keyboardCustom)
          .width(100)
          .height(50)
          .backgroundColor('#00000000')
          .customKeyboard(this.CustomKeyboardBuilder())
          .onClick(() => {
            focusControl.requestFocus(this.verifyID);
          })
          .id(this.keyboardCustomID)
      }

    }
  }

  async attachAndListen(): Promise<void> {
    focusControl.requestFocus(this.verifyID);
    await this.inputController.attach(true, this.textConfig);
    this.listen();
  }

  listen() {
    if (this.isListen) {
      return;
    }
    this.inputController.on("insertText", (text: string) => {
      this.codeText += text;
    })

    this.inputController.on("deleteLeft", (length: number) => {
      this.codeText = this.codeText.substring(0, this.codeText.length - 1);
    })
    this.isListen = true;
  }

  off(): void {
    this.inputController.off("insertText");
    this.inputController.off("deleteLeft");
    this.isListen = false;
  }

  // 自定义键盘组件
  @Builder
  CustomKeyboardBuilder() {
    Column() {
      Button('x').onClick(() => {
        // 关闭自定义键盘
        this.controller.stopEditing()
      })
      Grid() {
        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => {
          GridItem() {
            Button(item + "")
              .width(110).onClick(() => {
              this.codeText += item
            })
          }
        })
      }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)
    }.backgroundColor(Color.Gray)
  }
}

更多关于HarmonyOS 鸿蒙Next 想要实现TextInput组件的光标一直展示?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

可以试试customKeyboard直接绑定,可以来回切换,光标不会消失

// xxx.ets
@Entry
@Component
struct TextInputExample {
  controller: TextInputController = new TextInputController()
  @State inputValue: string = ""
  @State show:boolean = false

  // 自定义键盘组件
  @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.Gray)
  }

  build() {
    Column() {
      TextInput({ controller: this.controller, text: $$this.inputValue })
        // 绑定自定义键盘
        .customKeyboard(this.show?this.CustomKeyboardBuilder(): undefined).margin(10).border({ width: 1 }).height('48vp')
      Button("qiehuan")
        .onClick(()=>{
          this.show = !this.show
        })
    }
  }
}

更多关于HarmonyOS 鸿蒙Next 想要实现TextInput组件的光标一直展示?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这个办法好!但是有个小问题:自定义键盘应该可以根据光标在其后面添加输入的内容,但是貌似只能添加在后面,有什么办法解决嘛~

.onClick(() => {
   this.inputValue += item
})

我等会看看,感觉可以用splice插入,不用+拼接,稍后我试一下,

好~我也想想,

这种实现方式还有问题: 我输入的字符串,不可以在已经展示的字符串的中间插入内容

只能往后添加

在HarmonyOS(鸿蒙Next)中,若要让TextInput组件的光标一直展示,可以通过设置caretHidden属性来实现。caretHidden属性控制光标的显示与隐藏,默认值为false,即光标在焦点时显示。若希望光标一直展示,即使TextInput失去焦点,可以将caretHidden属性设置为false,并确保TextInput始终处于可编辑状态。

示例代码:

import { TextInput } from '@ohos/text';
import { UIAbility } from '@ohos.app.ability.UIAbility';

export default class EntryAbility extends UIAbility {
    onCreate() {
        let textInput = new TextInput();
        textInput.caretHidden = false; // 确保光标一直显示
        // 其他配置...
    }
}

通过这种方式,TextInput组件的光标将一直展示。

在HarmonyOS鸿蒙Next中,要实现TextInput组件的光标一直展示,可以通过设置TextInputcaretColor属性来控制光标颜色,并确保TextInput处于聚焦状态。可以通过focusable(true)requestFocus()方法确保组件始终处于聚焦状态。示例代码如下:

TextInput()
  .caretColor(Color.Blue) // 设置光标颜色
  .focusable(true) // 确保组件可聚焦
  .onAppear(() => {
    this.requestFocus(); // 组件出现时请求聚焦
  })

这样,TextInput组件的光标将一直显示。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!