uniapp 实现input聚焦时选中内容(已封装)兼容微信小程序

老规矩先来看看效果噻！

从上面的录屏中我们可以看出，要实现input自由选中内容的功能是可以实现的，原理其实很简单。

直接运行即可

<template>
	<view>
		<!-- <input class="psd"
		type="digit" :value="inputValue" :focus='focus' 
		selection-start='0' :selection-start='inputValue.length' :selection-end="inputValue.length"
		bindinput="bindInput" @blur='bindBlur'></input>
		<view class="cover-view" @tap="handleInput"></view> -->
		
		
		<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>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				focus: false,
				inputValue:9890,
				
				value:'选中输入框内容',
				renameFocus:false,
				start:-1,
				end:-1
			}
		
		},
		
		methods: {
			handleInput(e) {
				// this.setData({
					this.inputValue= parseFloat(this.inputValue)
					this.focus= true
				// })
			},
		
			bindInput(e) {
				this.setData({
					inputValue: e.detail.value
				})
				this.handleData()
			},
		
			bindBlur() {
				// this.setData({
				this.inputValue= this.inputValue
				this.focus= false
				console.log(this.focus)
			
			},
			
			pitch(){
				this.renameFocus=true
				this.start=0
				this.end=this.value.toString().length
			},
			bindblur(){
				this.renameFocus= false
				this.start= -1
				this.end= -1
			},
		
			
		}
	}
</script>

<style>
	.psd {
	  width: 70%;
	  height: 80rpx;
	  border: 1rpx solid #8a8a8a;
	  border-radius: 20rpx;
	  margin: 60% auto 0 auto;
	  font-size: 32rpx;
	  padding-left: 10rpx;
	}
	
	.cover-view {
	  width: 70%;
	  height: 80rpx;
	  border-radius: 20rpx;
	  opacity: 0;
	  position: relative;
	  left: 15%;
	  top: -80rpx;
	  z-index: 10;
	}
	
</style>