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

2,048 阅读1分钟

先看下效果
在这里插入图片描述
点击按钮选中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
},

如果想点击input选中内容,需要写一个和input一样的盒子,然后用v-if去切换

<view class="pickbox">
	<view class='inputbox' v-if='renameFocus==false' @click='pitch'>{{value}}</view>
	<input v-else class="uni-input" type="text" v-model="value" :focus="renameFocus"  :selection-start="start" 
	:selection-end="end" @blur="bindblur"/>
</view>

看到网上有很多用select()方法的,但小程序里好像不支持,h5端可以