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>
相关推荐
吴传逞1 天前
记一次uniapp微信小程序开发scss变量失效的问题
微信小程序·uni-app·scss
2501_915921432 天前
小团队如何高效完成 uni-app iOS 上架,从分工到工具组合的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
2501_916008892 天前
uni-app iOS 文件管理与 itools 配合实战,多工具协作的完整流程
android·ios·小程序·https·uni-app·iphone·webview
!win !2 天前
uni-app项目Tabbar实现切换icon动效
小程序·uni-app
xw52 天前
uni-app项目Tabbar实现切换icon动效
前端·uni-app
2501_916007472 天前
uni-app iOS 文件调试常见问题与解决方案:结合 itools、克魔、iMazing 的实战经验
android·ios·小程序·https·uni-app·iphone·webview
豆豆(设计前端)2 天前
使用 Uni-app 打包 外链地址APK 及 iOS 注意事项
ios·uni-app
jingling5552 天前
uniapp | 解决组件样式不生效问题
前端·css·uni-app·html·学习方法
^Rocky2 天前
微信小程序(uniapp)实现连接蓝牙
微信小程序·uni-app·蓝牙连接
2501_915918412 天前
uni-app 项目 iOS 上架踩坑经验总结 从证书到审核的避坑指南
android·ios·小程序·https·uni-app·iphone·webview