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

编写一个指令(v-focus2end)使输入框文本在聚焦时焦点在文本最后一个位置

项目反馈输入框内容比较多时候,让鼠标光标在最后一个位置,心想什么奇葩需求,后面试了一下,是有点影响体验,于是就有了下面的效果,我目前的项目都是若依的架子,用的是vue2版本。vue3的朋友想要使用,自行调节

效果图如下:

在这里插入图片描述

使用方法:
  • 前提是指令被注册,代码不显示注册内容
<el-input v-focus2end v-model="dialog.form.actionSign" placeholder="请输入" clearable />
v-focus2end 指令
  • 还能继续优化,我就不想在操作了
/*** Copyright ©* # v-focus2end* @author: zw* @date: 2023-07-17*/export default {inserted(el) {const input = el instanceof HTMLInputElement ? el : el.querySelector('input')input.addEventListener('focus', focusEventListener.bind(input), false)input.addEventListener('blur', blurEventListener.bind(input), false)el.__focusEventListener = focusEventListenerel.__blurEventListener = blurEventListener},unbind(el) {const input = el instanceof HTMLInputElement ? el : el.querySelector('input')input.removeEventListener('focus', el.__focusEventListener, false)input.removeEventListener('blur', el.__blurEventListener, false)},
}function focusEventListener(e) {e.preventDefault()setTimeout(() => {const inputLength = this.value.lengththis.setSelectionRange(inputLength, inputLength)smoothMove.call(this)}, 300)
}function blurEventListener() {this.removeEventListener('focus', focusEventListener, false)
}function smoothMove() {const scrollMax = this.scrollWidth - this.clientWidthconst duration = 300const startTime = performance.now()function smoothScroll(timestamp) {const elapsedTime = timestamp - startTimeconst progress = Math.min(elapsedTime / duration, 1)const scrollPosition = progress * scrollMaxthis.scrollLeft = scrollPositionif (elapsedTime < duration) {requestAnimationFrame(smoothScroll.bind(this))}}requestAnimationFrame(smoothScroll.bind(this))
}

相关文章:

编写一个指令(v-focus2end)使输入框文本在聚焦时焦点在文本最后一个位置

项目反馈输入框内容比较多时候&#xff0c;让鼠标光标在最后一个位置&#xff0c;心想什么奇葩需求&#xff0c;后面试了一下&#xff0c;是有点影响体验&#xff0c;于是就有了下面的效果&#xff0c;我目前的项目都是若依的架子&#xff0c;用的是vue2版本。vue3的朋友想要使…...

Virtualbox设置访问外网以及主机和虚拟机互通

参考链接 1、设置使虚拟机访问外网。选中虚拟机&#xff0c;右击选择“设置”。 2、在设置中选择“网络”&#xff0c;然后点击“网卡1”&#xff0c;选择“网络地址转换&#xff08;NAT&#xff09;”模式&#xff0c;点击“确定”。 4.此时你的虚拟机就可以访问外网了 5…...

请简述React是什么?React的主要特点有哪些?React中有哪些主要组件?

1、请简述React是什么&#xff1f; React是一个用于构建用户界面的JavaScript库&#xff0c;它由Facebook开发并开源。React的主要特点是其数据驱动和组件化的设计理念。它允许开发者将复杂的界面分解为简单的组件&#xff0c;并将这些组件以数据流的方式组合在一起&#xff0…...

DevOps最佳实践和工具在本地环境中的概述

引言 最近&#xff0c;我进行了一次网上搜索&#xff0c;以寻找DevOps的概述&#xff0c;尽管有大量的DevOps工具和实践&#xff0c;但我无法找到一个综合的概述。因此&#xff0c;我开始了对DevOps生态系统和最佳实践的梳理&#xff0c;以创建一个整体视图,方便后续研究实践 C…...

kafka和rabbitmq之间的区别以及适用场景

Kafka 和 RabbitMQ 都是流行的消息传递系统&#xff0c;用于实现分布式系统中的消息传递、事件处理和数据流。它们在设计和适用场景上有一些不同&#xff0c;下面详细介绍它们之间的区别和适用场景。 Kafka 特点和优势&#xff1a; 高吞吐量&#xff1a; Kafka 的设计目标是实…...

python——案例15:判断奇数还是偶数

案例15&#xff1a;判断奇数还是偶数numint(input(输入数值&#xff1a;))if(num%2)0: #通过if语句判断print("{0}是偶数".format(num))else: #通过else语句判断print("{0}是奇数".format(num))...

springboot汽车租赁后台java出租客户管理jsp源代码mysql

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 springboot汽车租赁后台 系统有1权限&#xff1a;管理…...

Linux学习之sed删除、追加、插入、更改、读写文件、下一行、打印、退出和seq命令

cat /etc/redhat-release看到操作系统是CentOS Linux release 7.6.1810&#xff0c;uname -r看到内核版本是3.10.0-957.el7.x86_64&#xff0c;sed --version可以看到sed版本是4.2.2。 echo a : 1 : good : g >> sed_daicpnrwq.txt echo b : 2 : well : w >> sed…...

JuiceFS 在多云存储架构中的应用 | 深势科技分享

2020 年末&#xff0c;谷歌旗下 DeepMind 研发的 AI 程序 AlphaFold2 在国际蛋白质结构预测竞赛上取得惊人的准确度&#xff0c;使得 “AI 预测蛋白质结构” 这一领域受到了空前的关注。今天我们邀请到同领域企业&#xff0c;深势科技为大家分享其搭建基础平台时的实践与思考。…...

什么是DNS的缓存?

DNS 缓存是一个临时的数据库&#xff0c;存储在计算机或网络设备&#xff08;如路由器&#xff09;上&#xff0c;用于保存最近的 DNS 查询结果。这种缓存机制可以加速后续的相同查询&#xff0c;因为设备可以直接从缓存中提取先前的查询结果&#xff0c;而不需要再次到外部的 …...

smtplib.SMTPHeloError: (500, b‘Error: bad syntax‘)

如果你编写邮件收发工具的时候,有可能会遇到这个问题。这里直接给出解决办法。 目录 1、检查系统版本 2、点击右侧的更改适配器选项...

/proc directory in linux

Its zero-length files are neither binary nor text, yet you can examine and display themUnder Linux, everything is managed as a file; even devices are accessed as files (in the /dev directory). Although you might think that “normal” files are either text …...

装饰器模式(C++)

定义 动态(组合)地给一个对象增加一些额外的职责。就增加功能而言&#xff0c;Decorator模式比生成子类(继承)更为灵活(消除重复代码&减少子类个数)。 一《设计模式》 GoF 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xf…...

matlab使用教程(12)—随机数种子和随机数流

1.生成可重复的随机数 1.1指定种子 本示例显示如何通过首先指定种子来重复生成随机数数组。每次使用相同种子初始化生成器时&#xff0c;始终都可以获得相同的结果。首先&#xff0c;初始化随机数生成器&#xff0c;以使本示例中的结果具备可重复性。 rng( default ); 现在…...

【Java】JVM GC配置指南

1、JDK版本 以下所有优化全部基于JDK8版本&#xff0c;强烈建议低版本升级到JDK8&#xff0c;并尽可能使用update_191以后版本。 2、如何选择垃圾回收器 响应优先应用&#xff1a;面向C端对响应时间敏感的应用&#xff0c;堆内存8G以上建议选择G1&#xff0c;堆内存较小或低…...

11.Eclipse 注释模板的说明及设置

1.在eclipse中点击Window——>java——>Code Style——>CodeTemplates——>Comments 2.常用Variable 3. 我的注释模板 ①Files 文件 /** * Title: ${file_name}* Description: ${todo}* author Jeremy* date ${currentDate:date(yyyy-MM-dd hh:mm:ss)} */ ②Typ…...

Maven父子工程项目的配置

在Java的Maven多模块&#xff08;父子工程&#xff09;项目中&#xff0c;Maven插件的配置非常重要&#xff0c;因为它们可以帮助你进行项目构建、测试、打包等各种任务。以下是一个简单的父子工程Maven插件配置的示例&#xff1a; 假设你有如下的项目结构&#xff1a; paren…...

jumpserver命令记录膨胀问题

一.背景 jumpserver堡垒机针对只是接管ssh来说&#xff0c;正常操作Linux的指令记录应该不会太多&#xff0c;每天有个几千条都已经算很多了。所以默认jumpserver采用MySQL作为存储介质本身也没啥问题。但是我们使用jumpserver对【MySQL应用】进行了托管&#xff0c;导致查询SQ…...

ControlNet

2023.8.10 Adding Conditional Control to Text-to-Image Diffusion Models 对于 T2I 扩散模型添加 条件控制 相关联比较大的几篇论文&#xff1a; 0.Abstract 可以为预训练的扩散模型提供额外的输入条件控制。不需要很多计算资源。 即使在小数据集上&#xff0c;也具有鲁棒…...

竞赛项目 深度学习图像风格迁移 - opencv python

文章目录 0 前言1 VGG网络2 风格迁移3 内容损失4 风格损失5 主代码实现6 迁移模型实现7 效果展示8 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习图像风格迁移 - opencv python 该项目较为新颖&#xff0c;适合作为竞赛课题…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

华为OD最新机试真题-数组组成的最小数字-OD统一考试(B卷)

题目描述 给定一个整型数组,请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3,则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组,0<数组长度<= 100,0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...

Python实现简单音频数据压缩与解压算法

Python实现简单音频数据压缩与解压算法 引言 在音频数据处理中&#xff0c;压缩算法是降低存储成本和传输效率的关键技术。Python作为一门灵活且功能强大的编程语言&#xff0c;提供了丰富的库和工具来实现音频数据的压缩与解压。本文将通过一个简单的音频数据压缩与解压算法…...

阿里云Ubuntu 22.04 64位搭建Flask流程(亲测)

cd /home 进入home盘 安装虚拟环境&#xff1a; 1、安装virtualenv pip install virtualenv 2.创建新的虚拟环境&#xff1a; virtualenv myenv 3、激活虚拟环境&#xff08;激活环境可以在当前环境下安装包&#xff09; source myenv/bin/activate 此时&#xff0c;终端…...