HarmonyOS 自定义键盘如何处理光标不在最后面位置

使用自定义键盘输入内容后,点击输入框内容中间位置,光标会在中间,再次点击键盘输入内容后,光标会自动跑到最后面,如何保持光标位置还在中间?

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
FengTianYa

参考示例如下:

@Entry
@Component
struct PhoneDemo {
  @State message: string = '';
  currentIndex: number = 0;
  inputChangeFlag: boolean = false;
  inputController: TextInputController = new TextInputController()

  build() {
    RelativeContainer() {
      Row() {
        Text('+86').margin({ right: 8 })
        TextInput({ text: this.message, controller: this.inputController })
          .type(InputType.PhoneNumber)
          .enableKeyboardOnFocus(false)
          .maxLength(13)
          .inputFilter('[0-9 ]', (e) => {
            console.log(JSON.stringify(e))
          })
          .onChange((value: string) => {
            let originV = value;
            let positionInfo = this.inputController.getCaretOffset();
            let currentIndex: number = positionInfo.index;
            // 判断是否是删除空格
            let arr1 = value.split(' ');
            let arr2 = this.message.split(' ');
            if (arr1.length < arr2.length) {
              // 删除了空格
              // 对value进行处理
              value = value.substring(0, currentIndex - 1) + value.substring(currentIndex)
              currentIndex = currentIndex - 1;
              if (currentIndex < 0) {
                currentIndex = 0;
              }
            }
            // 过滤字符串中的非数字
            value = value.replace(/[^0-9]/g, "");
            if (value.length > 7) {
              value = value.substring(0, 3) + ' ' + value.substring(3, 7) + ' ' + value.substring(7);
            } else if (value.length == 7) {
              value = value.substring(0, 3) + ' ' + value.substring(3, 7) + ' ';
            } else if (value.length > 3) {
              value = value.substring(0, 3) + ' ' + value.substring(3);
            } else if (value.length == 3) {
              value = value.substring(0, 3) + ' ';
            }
            // 检测输入是否被改变 (自动调整的数据value == originV肯定会验证通过)
            if (value == originV) {
              if (this.inputChangeFlag) {
                // 设置光标位置
                this.inputController.caretPosition(this.currentIndex);
                this.inputChangeFlag = false;
              }
            } else {
              this.inputChangeFlag = true;
              // 重新计算光标位置
              // 判断是否补空格
              // 获取当前位置是否是空格,或者插入数字前一个位置是空格
              let c_str = value.substring(currentIndex, currentIndex + 1);
              let c_p_str = value.substring(currentIndex - 1, currentIndex);
              if (c_str == ' ' || (this.message.length < value.length && c_p_str == ' ')) {
                currentIndex = currentIndex + 1;
              }
              this.currentIndex = currentIndex;
            }
            this.message = value
          })
          .width('50%')
      }.alignItems(VerticalAlign.Center).justifyContent(FlexAlign.Center).width('100%')
    }
    .height('100%')
    .width('100%')
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
基于自定义键盘设置光标位置
504浏览 • 1回复 待解决
ArkTS语句最后面加!是什么意思?
753浏览 • 1回复 待解决
HarmonyOS 自定义键盘
289浏览 • 1回复 待解决
如何设置自定义弹窗位置
2097浏览 • 1回复 待解决
HarmonyOS TextInput自定义键盘
466浏览 • 1回复 待解决
HarmonyOS 数字自定义键盘如何实现
354浏览 • 1回复 待解决
HarmonyOS 如何改变光标位置
383浏览 • 1回复 待解决
HarmonyOS 键盘顶部添加自定义组件
321浏览 • 1回复 待解决
小程序示例自定义键盘
329浏览 • 1回复 待解决
HarmonyOS TextInput自定义键盘问题
644浏览 • 1回复 待解决
HarmonyOS 自定义键盘防录屏方案
98浏览 • 1回复 待解决
HarmonyOS WebView使用自定义键盘问题
102浏览 • 1回复 待解决
HarmonyOS TextInput绑定自定义键盘问题
588浏览 • 1回复 待解决