老规矩先来看看效果噻！
从上面的录屏中我们可以看出，要实现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>
