欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 汽车 > 维修 > uniapp 实现input聚焦时选中内容(已封装)兼容微信小程序

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

2024/10/26 0:29:41 来源:https://blog.csdn.net/weixin_42981560/article/details/142962372  浏览:    关键词: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.inputValuethis.focus= falseconsole.log(this.focus)},pitch(){this.renameFocus=truethis.start=0this.end=this.value.toString().length},bindblur(){this.renameFocus= falsethis.start= -1this.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>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com