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

老规矩先来看看效果噻!
从上面的录屏中我们可以看出,要实现input自由选中内容的功能是可以实现的,原理其实很简单。

直接运行即可

javascript 复制代码
<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>
相关推荐
七七小报3 小时前
uniapp-商城-40-shop 购物车 选好了 进行订单确认4 配送方式3 地址编辑
uni-app
xuanjiong6 小时前
微信小程序,基于uni-app的轮播图制作,调用文件中图片
微信小程序·小程序·uni-app
flying robot7 小时前
uniapp: 低功耗蓝牙(BLE)的使用
uni-app
程序猿John7 小时前
uniapp跳转和获取参数方式
前端·javascript·uni-app
七七小报1 天前
uniapp-商城-38-shop 购物车 选好了 进行订单确认4 配送方式1
uni-app
七七小报1 天前
uniapp-商城-39-shop 购物车 选好了 进行订单确认4 配送方式2 地址页面
uni-app
G_GreenHand1 天前
uniapp 仿小红书轮播图效果
uni-app
性野喜悲1 天前
uniapp返回上一页接口数据更新了,页面未更新
uni-app
冰镇生鲜1 天前
小程序·安全·胶囊·容器组件
前端·vue.js·uni-app
盛夏绽放1 天前
uni-app云开发总结
uni-app·云开发