uniapp小程序中input内容选中效果

倘若hfl

已于 2023-06-14 13:42:32 修改

阅读量6.6k

点赞数 3

分类专栏： Uni-app 文章标签： uni-app

于 2021-05-19 11:48:41 首次发布

本文链接：https://blog.csdn.net/hu104160112/article/details/117021870

版权

本文介绍了在uni-app小程序中实现input内容选中的方法，通过结合focus、selection-start和selection-end属性来达成效果。虽然select()方法在h5端可行，但在小程序中不支持，文中提供了适用于小程序和h5端的解决方案。

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

先看下效果
在这里插入图片描述
点击按钮选中input的内容，使用 focus 配合 selection-start和selection-end实现

//html
<view class="pickbox">
	<input class="uni-input" type="text" v-model="value" :focus="renameFocus"  :selection-start="start" 
	:selection-end="end" @blur="bindblur"/>
	<button type="default" @click='pitch'>选中</button>
</view>

//js
data(){
	value:'选中输入框内容',
	renameFocus:false,
	start:-1,
	end:-1
},

pitch(){
	this.renameFocus=true
	this.start=0
	this.end=this.value.toString().length
},
bindblur(){
	this.renameFocus= false
	this.start= -1
	this.end= -1
},

如果想点击i