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>
相关推荐
00后程序员张10 小时前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬11 小时前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_9151063211 小时前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
xkxnq11 小时前
Uniapp崩溃监控体系构建:内存泄漏三维定位法(堆栈/资源/线程)
uni-app
Qlittleboy11 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
写代码的jiang11 小时前
打造精简高效的 uni-app 网络请求工具
uni-app
!win !19 小时前
uni-app项目支付宝端Input不受控
小程序·uni-app·支付宝小程序
xw519 小时前
uni-app项目支付宝端Input不受控
前端·uni-app·支付宝
百思可瑞教育1 天前
Vue.config.js中的Webpack配置、优化及多页面应用开发
前端·javascript·vue.js·webpack·uni-app·北京百思教育
百思可瑞教育1 天前
Vue中使用keep-alive实现页面前进刷新、后退缓存的完整方案
前端·javascript·vue.js·缓存·uni-app·北京百思可瑞教育