dcloudio / uni-app

A cross-platform framework using Vue.js
https://uniapp.dcloud.io
Apache License 2.0
39.96k stars 3.62k forks source link

input编辑时,能支持设置光标位置吗? #5045

Open zxhbloomer opened 2 months ago

zxhbloomer commented 2 months ago

正在尝试写个组件,格式化数字的。 比如千分符,当输入数字超过4位数时,自动显示千分符,问题出现了,调用format之后由于文字发生了编号(加了千分符),光标自动跳到最后。 现在找了很多,没有找到input设置光标的地方。

在文档中虽然找到了input cursor属性,这个属性只有在focus时才有效果。

bfc846958672 commented 2 months ago

如果仅仅做格式化数字功能,可以自定义类input组件,自己渲染光标。 或者调整交互,在失去光标时,做格式化,类似于这个组件vue-numeric

zxhbloomer commented 2 months ago

嗯,谢谢大大提供思路,这个组件存在如下问题: 1、子组件使用ref,获取this.$refs.xxx的对象为{}。 2、该组件是失去焦点后,才会format,我希望能够输入文字时,就能format,如千分符。 3、我调查了挺多的组件如下图 image

在uni中使用,发现总的问题如下: 1、子组件使用ref,获取this.$refs.xxx的对象为{},无法使用,所以放弃 2、在输入文字时,强制使用format,如千分符,uni的input光标自动会放到跳转到最后 3、关于vue很多格式化数字的组件,都会设置光标。但是似乎uni中的组件就是没有。可能和光标定位有关(注:我看了很多关于vue number的其他组件,基本都会处理一个问题:格式化数字化定位光标。) 觉得这个组件挺好的,想翻译成uni input来使用,光标定位方法也有,但是就差input光标定位的方法了,vue-number

zxhbloomer commented 2 months ago

感觉在uni中,就没有可以在输入数字时,强制格式化数字的input组件。 个人愚见:输入文字时,无法定位光标造成。

zxhbloomer commented 2 months ago

https://github.com/user-attachments/assets/4372f6cb-aff2-4e1a-82ea-951f65256d42

基本功能都完成了,就差定位光标了

bfc846958672 commented 2 months ago

image 你好,是支持调整光标的

zxhbloomer commented 2 months ago

感谢大大的反馈,继续讨论: 这个光标仅仅在得到焦点时才有效果,也就是当控件得到焦点时,设置光标位置有效。 但是在编辑过程中无效,这个在文档中也有体现。 image