vue输入框自动聚焦定位尾部显示

你好小马哥

于 2023-03-17 17:08:57 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_34955596/article/details/129624577

该文章展示了如何在Vue.js中使用DOM操作，特别是对textarea元素的v-model绑定和setSelectionRange方法，实现文本区域的焦点定位及全选功能。在mounted生命周期钩子中，通过$refs获取textarea并设置选择范围。对于不支持setSelectionRange的浏览器，文章提供了使用createTextRange的备选方案。

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

1、DOM

<textarea  ref="textarea"  v-model.trim="content"  />

2、js

mounted() {
	    const put = this.$refs.textarea 
    const len = put.value.length   
    this.setSelectionRange(put, len, len)


}
methods: {

	 setSelectionRange(input, selectionStart, selectionEnd) {
      if (input.setSelectionRange) {
        input.focus()
        input.setSelectionRange(selectionStart, selectionEnd)
      } else if (input.createTextRange) {
        const range = input.createTextRange()
        range.collapse(true)
        range.moveEnd('character', selectionEnd)
        range.moveStart('character', selectionStart)
        range.select()
      }
    }
}

注：代码仅供参考