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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/447813.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

K8s简介和安装部署

一、 Kubernetes 简介及部署方法 1、应用部署方式演变 Kubernetes简称为K8s&#xff0c;是用于自动部署、扩缩和管理容器化应用程序的开源系统&#xff0c;起源于Google 集群管理工具Borg。 传统部署 &#xff1a;互联网早期&#xff0c;会直接将应用程序部署在物理机上 优…

使用Rollup.js快速开始构建一个前端项目

Rollup 是一个用于 JavaScript 项目的模块打包器&#xff0c;它将小块代码编译成更大、更复杂的代码&#xff0c;例如库或应用程序。Rollup 对代码模块使用 ES6 模块标准&#xff0c;它支持 Tree-shaking&#xff08;摇树优化&#xff09;&#xff0c;可以剔除那些实际上没有被…

Vs配置opencv库 实例,opencv选用4.9.0版本,vs版本是2022社版,学习笔记不断更新

课程链接 贾志刚老师opencv入门课程 备注&#xff1a;由于课程好几年前了&#xff0c;直接将环境配置为opencv4.9.0vs22 参考&#xff1a; 参考搭建环境 opencv下载环境&#xff1a;opencv vs22opencv4.9.0 创建一个文件夹 并修改下下面的目录&#xff0c;我的目录是F:\opencv…

模态与非模态的对话框

本文学习自&#xff1a; 《Qt Creato快速入门》 #include "widget.h" #include <QApplication>int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); }1. #include "widget.h" #include "ui_w…

K8s的储存

一 configmap 1.1 configmap的功能 configMap用于保存配置数据&#xff0c;以键值对形式存储。 configMap 资源提供了向 Pod 注入配置数据的方法。 镜像和配置文件解耦&#xff0c;以便实现镜像的可移植性和可复用性。 etcd限制了文件大小不能超过1M 1.2 configmap的使用场…

SoC芯片中Clock Gen和Reset Gen的时钟树综合

社区目前已经开设了下面列举的前四大数字后端实战课程&#xff0c;均为直播课&#xff0c;且均是小编本人亲自授课&#xff01;遇到项目问题&#xff0c;都可以远程一对一指导解决具体问题。小编本人是一线12年后端经验的数字后端工程师。想找一线IC后端技术专家亲自带你做后端…

Flink CDC同步mysql数据到doris

前置参考 flink快速安装&#xff1a;Flink入门-CSDN博客 doris快速安装&#xff1a;Apache Doris快速安装-CSDN博客 Flink CDC简介 Flink CDC 是一个基于流的数据集成工具&#xff0c;旨在为用户提供一套功能更加全面的编程接口&#xff08;API&#xff09;。 该工具使得用户能…

学习如何将Spring Boot Jar包注册成Windows服务

​ 博客主页: 南来_北往 系列专栏&#xff1a;Spring Boot实战 在开发Spring Boot应用时&#xff0c;我们通常通过命令行或IDE手动启动项目。然而&#xff0c;在生产环境中&#xff0c;为了提升效率和稳定性&#xff0c;我们更希望应用能够自动启动&#xff0c;并且作为Wi…

LeetCode|70.爬楼梯

这道题很像斐波那契数列&#xff0c;但是初始值不同&#xff0c;也有动态规划的解法&#xff0c;但是一开始我想到的是递归写法。现在我们站在第n阶台阶&#xff0c;那么&#xff0c;我们上一步就有两种可能&#xff1a;1、我们从第n-1阶台阶走一步上来的&#xff1b;2、我们从…

OBOO鸥柏品牌实力怎么样?权威解析

OBOO鸥柏&#xff08;深圳市鸥柏科技有限公司&#xff09;作为国内较大规模的高新技术生产制造型企业&#xff0c;定位于商用显示领域高端品牌&#xff0c;在工业级/商用级智能液晶显示及触控查询软硬件终端领域展现出了强劲的实力。以下是对OBOO鸥柏实力的详细权威分析&#x…

【大数据技术基础 | 实验一】配置SSH免密登录

文章目录 一、实验目的二、实验要求三、实验原理&#xff08;一&#xff09;大数据实验一体机&#xff08;二&#xff09;SSH免密认证 四、实验环境五、实验内容和步骤&#xff08;一&#xff09;搭建集群服务器&#xff08;二&#xff09;添加域名映射&#xff08;三&#xff…

Zsh 安装与配置

目录 1 环境配置 1.1 基本工具安装 1.2 安装 oh-my-zsh 1.3 从.bashrc中迁移配置&#xff08;可选&#xff09; 2 主题配置 2.1 内置主题 2.2 自定义主题 2.2.1 推荐主题 3 插件安装 3.1 推荐插件 3.1.1 zsh -autosuggestions 3.1.2 zsh-syntax-highlighting 3.2 启…

一键快捷回复软件助力客服高效沟通

双十一临近&#xff0c;电商大战一触即发&#xff01;在这个购物狂欢的热潮中&#xff0c;客服团队的效率至关重要。今天我要和大家分享一个非常实用的快捷回复软件&#xff0c;特别是为电商客服小伙伴们准备的。这款软件能够极大地提高你的工作效率&#xff0c;让你在处理客户…

优化UVM环境(三)-环境发包较多时,会触发timeout

书接上回&#xff1a; 优化UVM环境&#xff08;一&#xff09;-环境结束靠的是timeout&#xff0c;而不是正常的objection结束 优化UVM环境&#xff08;二&#xff09;-将error/fatal红色字体打印&#xff0c;pass绿色字体打印 环境发包较多时&#xff0c;会触发timeout 解决…

高阶数据结构与算法——红黑树の奥秘

1.认识红黑树 1.1红黑树的概念 红⿊树是⼀棵⼆叉搜索树&#xff0c;他的每个结点增加⼀个存储位来表⽰结点的颜⾊&#xff0c;可以是红⾊或者⿊⾊。通过对任何⼀条从根到叶⼦的路径上各个结点的颜⾊进⾏约束&#xff0c;红⿊树确保没有⼀条路径会⽐其他路径⻓出2倍&#xff0c…

“我们为什么缺少科学精神”演讲内容拆解

演讲人张双南&#xff0c;视频链接&#xff1a; https://tv.cctv.com/2017/04/23/VIDEdqzdpmxStYXAmYBdgDP7170423.shtml

PicGo+Gitee搭建Typora图床

PicGoGitee搭建Typora图床 下载PicGo 下载链接&#xff1a;https://picgo.github.io/PicGo-Doc/zh/guide/#%E4%B8%8B%E8%BD%BD%E5%AE%89%E8%A3%85 配置PicGo 插件安装 在PicGo的【插件设置】中搜索gitee-uploader插件并安装 在【图床设置】下配置Gitee repo&#xff1a;用…

车载 3D 地图如何从技术上实现渲染品质的全面提升?

随着汽车由单纯的交通工具、“硬件为主”的工业产品向智能化终端、“第三空间”转变。3D HMI 已成为整车厂打造极致沉浸感与数字豪华感的“标配”。实时光影、昼夜交替、天气变化、地面反射、动态植被……高沉浸感、自然交互的 3D 地图为驾驶者营造身临其境的视觉享受&#xff…

VMware免安装直接使用Win7成品虚拟机

VM虚拟机免安装直接使用Win7 下载文件 Win7成品虚拟机下载 ⏬下载链接⏬ 下载链接 使用虚拟机打开成品虚拟机

【前端】制作属于自己的网页(1)

好的&#xff01;你可以使用以下的HTML代码创建一个简单的网页&#xff0c;标题为“第一个网页”&#xff1a; html <!DOCTYPE html> <html lang"zh"> <head> <meta charset"UTF-8"> <meta name"viewport" conten…