Skip to content

fix(Field): incorrect cursor position when value length exceeds maxlength or when formatter is used #11360

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 18, 2022

Conversation

jiadesen
Copy link
Contributor

@jiadesen jiadesen commented Dec 6, 2022

@jiadesen jiadesen changed the title fix(Field): incorrect cursor position when value length exceeds maxle… fix(Field): incorrect cursor position when value length exceeds maxlength or when formatter is used Dec 6, 2022
@chenjiahan
Copy link
Member

感谢 PR,不过这个实现方式是比较复杂的,我在考虑是否有必要这么做。

Vant 一开始实现自定义的 maxlength,只是为了解决原生 maxlength 对「换行符字数统计不准确」的问题,参见 #5033

如果不使用原生 maxlength 会导致如此复杂的光标问题,那我倾向于换回原生 maxlength,然后换一种方式解决「换行符字数统计不准确」的问题,这样代码的复杂度会小很多。

@jiadesen
Copy link
Contributor Author

jiadesen commented Dec 10, 2022

光标定位问题并不只是 maxlength 引起的,而且我认为这是个小问题,对 #5033 的修正也并没有太多疑问,只是在 v3.6.10 的基础上做了改进,因为 v3.6.10 版本对光标位置的修正只是单纯的减 1,这仅适用于用户单字符逐个输入的情况(当然这可能代表绝大部分用户行为),没有考虑用户复制粘贴的场景。在这个过程中,又发现并修正 limitValueLength 的字符截取策略与原生 input 存在差异的问题,详见 #11359 重现链接中对 BUG1 的描述。

其实,本次更改侧重于修正使用 formatter 可能带来的光标定位问题,比如输入手机号(例:139 6666 9999),或银行卡号(每4位数字插入一个空格,demo 详见 BUG2),有时需要根据规则动态插入空格分隔,当从中间输入时光标会跳跃到最后,这种光标定位问题往往会给团队一些同学带来困惑。带着这个问题,也去看了 element-plus 的 input 组件,确实对于自定义 formatter 是有相关光标修正操作的。

@chenjiahan chenjiahan merged commit 5a1188c into youzan:3.x Dec 18, 2022
@chenjiahan
Copy link
Member

get,确实这样的处理在各个场景下的体验都是最佳的,感谢贡献~

chenjiahan pushed a commit that referenced this pull request Dec 18, 2022
@jiadesen jiadesen deleted the fix_field_cursor_position_1206 branch December 19, 2022 09:16
@jiadesen
Copy link
Contributor Author

v3 找个时间发个新版呢 🎉

@chenjiahan
Copy link
Member

嗯嗯,已发布 v3.6.11

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants