当前位置: 首页 > article >正文

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.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>


http://www.kler.cn/news/360824.html

相关文章:

  • uniapp的相关知识(2)
  • 10.22学习
  • Recall/Coarse Ranking/Fine Ranking
  • 每日算法一练:剑指offer——数组篇(3)
  • 图像异常检测评估指标-分类性能
  • 存-20241019 CSPJ模拟测试5 题解
  • 免费开源的微信开发框架
  • CentOS安装Docker教程,及报错。
  • RK3568平台开发系列讲解(调试篇)debugfs 文件系统
  • C++中static关键字的用法(实现日期类)
  • 【Vulnhub靶场】Kioptrix Level 5
  • 【算法】深入了解 CRC 校验码的计算过程
  • 【计网笔记】应用层
  • 深度学习的高级应用
  • 1791. 找出星型图的中心节点
  • [云] Project Analysis
  • 【Vue3】将 Element Plus 引入 Vue3 项目
  • minio
  • 手机功耗技术点
  • 关于本地项目推送到Gitee时可能报的错误