vue获取+设置光标位置 光标定位 选择输入框文本

文章介绍了在Vue2和Vant2环境下,由于van-field组件不支持直接设置光标,因此可以通过`this.$refs`来间接获取inputDOM元素,然后使用`setSelectionRange()`方法来设置光标位置。示例代码展示了如何在输入框中点击按钮后自动添加@qq.com并定位光标。

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

版本:vue2、vant2
在vue是用ref、refs获取dom的,在vant框架里van−field是输入框组件,它不支持直接设置光标的方法setSelectionRange(),所以通过this.refs获取dom的,在vant框架里van-field是输入框组件,它不支持直接设置光标的方法setSelectionRange(),所以通过this.refs获取dom的,在vant框架里vanfield是输入框组件,它不支持直接设置光标的方法setSelectionRange(),所以通过this.refs.be.$refs.input获取到input这个原生dom,再对其使用设置光标:

<van-field label="邮 箱" v-model.trim="buyerEmail" ref="be" placeholder="电子邮箱" clearable></van-field>

<script>
export default {
methods: {
  //我这里实现的是点击按钮自动在输入框后面加上@qq.com
  fillEmail(a){
    let em = this.buyerEmail ? this.buyerEmail : '';
    this.buyerEmail = em + a;
    let d = this.$refs.be.$refs.input; //获取dom
    this.$refs.be.focus();//设置焦点
    this.$nextTick(() => { //必需
    	//setSelectionRange两个参数是光标的起、止位置
    	//设置一样就是闪烁光标,不一样就是选择文本
    	//这里我是选择@前的内容
        d.setSelectionRange(0, this.buyerEmail.indexOf('@')); 
        console.log(d.selectionStart) //获取光标起始位置
        console.log(d.selectionEnd) //获取光标结束位置
    })
  },
}
}
<script>
### Vue2 中实现 Input 框光标定位并插入文本的方法 在 Vue2 项目中,可以通过 DOM API 和事件监听器来实现 `input` 框内的光标定位以及插入特定文本的功能。以下是具体实现方式: #### 核心逻辑 通过 JavaScript 的原生 DOM 方法 `setSelectionRange(start, end)` 来控制光标的起始和结束位置[^1]。此方法适用于 `<input>` 和 `<textarea>` 元素。 对于插入内容的操作,则需要获取当前光标位置,并将新内容拼接到原有字符串中的对应索引处[^2]。 --- #### 实现代码示例 以下是一个完整的 Vue2 组件示例,展示如何动态插入文本到指定光标位置: ```vue <template> <div> <input type="text" ref="inputRef" @focus="handleFocus" @input="updateValue" v-model="value" /> <button @click="insertText">插入文本</button> </div> </template> <script> export default { data() { return { value: "", // 双向绑定的输入框值 cursorPosition: null, // 记录光标当前位置 }; }, methods: { handleFocus(event) { this.cursorPosition = event.target.selectionStart; // 获取光标初始位置 }, updateValue(event) { const { selectionStart } = event.target; this.cursorPosition = selectionStart; // 更新光标位置 }, insertText() { const inputValue = this.value || ""; // 当前输入框的值 const textToInsert = "Hello"; // 要插入的文本 let beforeCursor = inputValue.substring(0, this.cursorPosition); // 光标之前的部分 let afterCursor = inputValue.substring(this.cursorPosition); // 光标之后的部分 // 合并新的字符串 this.value = beforeCursor + textToInsert + afterCursor; // 设置光标的新位置 this.$nextTick(() => { const newCursorPosition = this.cursorPosition + textToInsert.length; this.setCaretPosition(newCursorPosition); }); }, setCaretPosition(position) { const inputElement = this.$refs.inputRef; if (inputElement.setSelectionRange) { inputElement.focus(); inputElement.setSelectionRange(position, position); // 定位光标 } }, }, }; </script> ``` --- #### 关键点解析 1. **记录光标位置** 使用 `selectionStart` 属性获取光标所在位置,并将其存储以便后续操作。 2. **分割原始字符串** 将输入框的内容按照光标位置分为两部分:光标之前的子串 (`beforeCursor`) 和光标之后的子串 (`afterCursor`)。 3. **更新输入框内容** 新内容被插入到两个子串之间形成最终结果,并重新赋值给输入框模型属性 `v-model`。 4. **重置光标位置** 利用 `$nextTick()` 确保视图更新完成后调用 `setSelectionRange()` 方法调整光标至正确位置[^3]。 --- #### 注意事项 - 如果目标浏览器不支持某些现代特性(如 Firefox 对拖拽行为的影响),需额外处理兼容性问题。 - 需要确保每次修改数据后及时刷新界面状态以同步视觉效果与实际逻辑。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值