antd vue input输入框输入小写字母实时转大写

最新推荐文章于 2024-08-14 15:58:05 发布

外面有点冷的时候

最新推荐文章于 2024-08-14 15:58:05 发布

阅读量1.6k

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_46548238/article/details/127443544

版权

Vue 专栏收录该内容

3 篇文章

订阅专栏

这篇博客讨论了在前端开发中遇到的一个常见问题：在input输入框中实现用户输入小写字母自动转大写，但导致光标异常跳动。作者提供了一个解决方案，即在转换字符串为大写后，通过设置光标位置的方法，确保光标保持在正确位置，避免了输入过程中光标移动到末尾的问题。该方法利用了JavaScript的selectionStart属性和setSelectionRange方法，实现了在输入过程中光标位置的正确维护。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景

要求在输入框输入的时候输入小写字母，输入框中显示的是对应的大写字母。在之前写的时候用到了input输入框的change事件，每次输入时就调用toUpperCase()方法将字符串转大写，但是会出现问题是：在已经输入的字符串中间插入字母，每输入一个字母后，光标都会跑到最后面，因为在每次输入的时候整个字符串被替换了。
要求：光标正常显示，不跳动到最后。

解决方法

在调用toUpperCase()方法之后手动设置光标的位置。

	// 设置光标位置，防止光标跳动
    setCursor(event) {
    // 形参event是change的事件对象
      const start = event.target.selectionStart
      this.$nextTick(() => {
        event.target.setSelectionRange &&
          event.target.setSelectionRange(start, start)
      })
    },