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

vue去掉所有输入框两边空格,封装指令去空格,支持Vue2和Vue3,ElementUI Input去空格

需求背景

就是页面很多表单输入框,期望在提交的时候,都要把用户两边的空格去掉

  • ❌使用 vue 的指令 .trim 去掉空格
    1. 中间会输入不了空格, 比如我想输入 你好啊 中国, 这中间的空格输入不了,只能变成 你好啊中国
  • ❌在提交的时候使用 trim()方法去两边空格
    1. 需要一个个字段的添加,容易出错
    2. 有必填项的校验麻烦,比如用户输入了多个空格 ,我们希望能在输入框下面有提示

期望实现

  • ✅封装一个指令,能够在鼠标失焦的时候把两边的空格去掉,这样就对之前的业务代码没有影响
  • Input,TextArea都能支持
  • ✅不区分组件库,ElementAntd, iview这些的Input都能使用

希望如下几种使用方法都支持

    <el-form><el-form-item><input type="text" v-model="inputs.aaa" placeholder="普通inut" v-trim /></el-form-item><el-form-item><el-input v-model="inputs.bbb" placeholder="el-input" v-trim /></el-form-item><el-form-item v-trim><el-input v-model="inputs.ccc" placeholder="外层使用" /></el-form-item></el-form>

在这里插入图片描述

实现

Vue3版本

/*** 去除两边空格* <el-input v-model="xxx" v-trim></el-input>*/function getInput(el) {let inputEle;const { tagName } = el;if (tagName === "INPUT" || tagName === "TEXTAREA") {inputEle = el;} else {inputEle = el.querySelector("input");if (!inputEle) {inputEle = el.querySelector("textarea");}}return inputEle;
}function dispatchEvent(el, type) {let evt = document.createEvent("HTMLEvents");evt.initEvent(type, true, true);el.dispatchEvent(evt);
}const Trim = {mounted: el => {if (!el) return;let inputEle = getInput(el);const handler = function (event) {const newVal = event.target.value.trim();if (event.target.value != newVal) {event.target.value = newVal;dispatchEvent(inputEle, "input");}};el.inputEle = inputEle;el._blurHandler = handler;inputEle?.addEventListener("blur", handler);},beforeUnmount(el) {const { inputEle } = el;inputEle?.removeEventListener("blur", el._blurHandler);},
};Trim.install = app => {app.directive("trim", Trim);
};export default Trim;

Vue2版本

/*** 去除两边空格* 使用 <el-input v-model="xxx" v-trim></el-input>*/
function getInput(el) {let inputEle;const { tagName } = el;if (tagName === "INPUT" || tagName === "TEXTAREA") {inputEle = el;} else {inputEle = el.querySelector("input");if (!inputEle) {inputEle = el.querySelector("textarea");}}return inputEle;
}
function dispatchEvent(el, type) {let evt = document.createEvent('HTMLEvents')evt.initEvent(type, true, true)el.dispatchEvent(evt)
}
const Trim = {inserted: el => {let inputEle = getInput(el)const handler = function(event) {const newVal = event.target.value.trim()if (event.target.value != newVal) {event.target.value = newValdispatchEvent(inputEle, 'input')}}el.inputEle = inputEleel._blurHandler = handlerinputEle.addEventListener('blur', handler)},unbind(el) {const { inputEle } = elinputEle.removeEventListener('blur', el._blurHandler)}
}
Trim.install = function(Vue) {Vue.directive('trim', Trim)
}
export default Trim

使用

<template><div class="container">测试页面<el-form><el-form-item><input type="text" v-model.trim="inputs._a" placeholder="原生input,v-model.trim能实现" /></el-form-item><el-form-item><input type="text" v-model="inputs.aaa" placeholder="普通inut" v-trim /></el-form-item><el-form-item><el-input v-model="inputs.bbb" placeholder="el-input" v-trim /></el-form-item><el-form-item v-trim><el-input v-model="inputs.ccc" placeholder="外层使用" /></el-form-item></el-form></div>
</template><script>
export default {name: 'TestPage',data() {return {inputs: {aaa: '',bbb: '',ccc: '',},}},
}
</script>
<style lang="scss" scoped>
.el-form {padding-top: 100px;max-width: 500px;margin: 0 auto;input {width: 100%;padding: 0 20px;height: 40px;}
}
</style>

效果预览
在这里插入图片描述

相关文章:

vue去掉所有输入框两边空格,封装指令去空格,支持Vue2和Vue3,ElementUI Input去空格

需求背景 就是页面很多表单输入框&#xff0c;期望在提交的时候&#xff0c;都要把用户两边的空格去掉 ❌使用 vue 的指令 .trim 去掉空格 中间会输入不了空格&#xff0c; 比如我想输入 你好啊 中国, 这中间的空格输入不了&#xff0c;只能变成 你好啊中国 ❌在提交的时候使用…...

认识FFMPEG框架

FFMPEG全称: Fast Forward Moving Picture Experts Group (MPEG:动态图像专家组) ffmpeg相关网站: git://source.ffmpeg.org/ffmpeg.git http://git.videolan.org/?pffmpeg.git https://github.com/FFmpeg/FFmpeg FFMPEG框架基本组件: AVFormat , AVCodec, AVDevice, AVFil…...

Vue3 大屏数字滚动效果

父组件&#xff1a; <template> <div class"homePage"> <NumRoll v-for"(v, i) in numberList" :key"i" :number"v"></NumRoll> </div> </template> <script setup> import { onMounted, r…...

【深度学习注意力机制系列】—— SENet注意力机制(附pytorch实现)

深度学习中的注意力机制&#xff08;Attention Mechanism&#xff09;是一种模仿人类视觉和认知系统的方法&#xff0c;它允许神经网络在处理输入数据时集中注意力于相关的部分。通过引入注意力机制&#xff0c;神经网络能够自动地学习并选择性地关注输入中的重要信息&#xff…...

go 函数

go 语言函数 go 函数函数定义Go函数的特点如下函数作为参数可变参数相同类型可变参数不同类型可变参数 return语句作用概述空的return语句空白标识符多个返回值命名返回值 defer 语句作用引申出来的面试题for defer下面是一个使用defer的示例代码输出结果 匿名函数定义匿名函数…...

python之正则表达式

目录 正则表达式 python正则表达式方法 match search findall finditer compile 元字符匹配 元字符 量词 贪婪匹配和惰性匹配 正则表达式的group 语法 案例 正则表达式 正则表达式又称规则表达式&#xff0c;是使用单个字符串来描述、匹配某个句法规则的字符串…...

【LeetCode每日一题】——219.存在重复元素II

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时间频度】九【代码实现】十【提交结果】 一【题目类别】 哈希表 二【题目难度】 简单 三【题目编号】 219.存在重复元素II 四【题目描述】 给你一个…...

篇六:适配器模式:让不兼容变兼容

篇六&#xff1a;“适配器模式&#xff1a;让不兼容变兼容” 开始本篇文章之前先推荐一个好用的学习工具&#xff0c;AIRIght&#xff0c;借助于AI助手工具&#xff0c;学习事半功倍。欢迎访问&#xff1a;http://airight.fun/ 另外有2本不错的关于设计模式的资料&#xff0c…...

【云原生】Docker-compose中所有模块学习

compose模块 模板文件是使用 Compose 的核心&#xff0c;涉及到的指令关键字也比较多。但大家不用担心&#xff0c;这里面大部分指令跟 docker run 相关参数的含义都是类似的。 默认的模板文件名称为 docker-compose.yml&#xff0c;格式为 YAML 格式。 version: "3&quo…...

广义积分练习

前置知识 无穷限积分瑕积分 练习 计算 ∫ 0 ∞ 1 x ( 1 x ) d x \int_0^{\infty}\dfrac{1}{\sqrt x(1x)}dx ∫0∞​x ​(1x)1​dx 解&#xff1a; x 0 \qquad x0 x0为瑕点 \qquad 原式 lim ⁡ a → 0 lim ⁡ b → ∞ ∫ a b 1 x ( 1 x ) d x lim ⁡ a → 0 lim ⁡…...

element-ui树形表格,左边勾选,右边显示选中的数据-功能(如动图)

功能如图 功能需求 表格树形表格勾选数据&#xff0c;右边显示对应勾选的数据内容&#xff0c;选中客户&#xff0c;自动勾选所有的店铺(子级)&#xff0c;选中其中一个店铺&#xff0c;自动勾选上客户(父级)&#xff0c;同时会存在只有客户&#xff08;下面没有子级的情况&am…...

Android数字价格变化的动画效果的简单实现

原理&#xff1a;使用ValueAnimator属性动画类实现&#xff0c;它通过值的改变手动设置对象的属性值来实现动画效果。直接贴代码&#xff1a; public static void doNumberAnim(TextView tvPrice, float startNumber, float endNumber) {ValueAnimator animator ValueAnimato…...

Win10无法投影关闭3D模式

Win10不小心开启了3D模式&#xff0c;插上投影仪就一闪一闪的&#xff0c;无法正投影 解决办法&#xff1a; 1. 打开注册表工具regedit&#xff0c;删除以下注册表&#xff0c;重启电脑 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\GraphicsDrivers\Configurat…...

FFmpeg 编码详细流程

介绍 FFmpeg的 libavcodec 模块完成音视频多媒体的编解码模块。FFmpeg 本身不具有音视频编码的功能和底层能力&#xff0c;只是对各类第三方的编码器API 进行封装调用。老版本的 FFmpeg 将avcodec_encode_video2()作为视频的解码函数 API&#xff0c;将avcodec_encode_audio2(…...

05如何做微服务架构设计

一句话导读 微服务架构设计方法有&#xff1a;领域驱动设计DDD&#xff08;Domain-Driven-Design&#xff09;、12因素应用&#xff08;12-Factor App&#xff09;、事件驱动架构EDA&#xff08;Event-Driven Architecture&#xff09;等等&#xff0c;但是他们都必须遵守微服务…...

安卓开发问题记录:需要常量表达式

问题原因 写代码过程中爆出这个错误&#xff1a;需要常量表达式&#xff0c;定位到switch。 解决方法&#xff1a;把switch case&#xff0c;改成if else 错误源代码&#xff1a; public void onClick(View view) {switch (view.getId()) {case R.id.iv_code:RxCaptcha.build(…...

回归预测 | MATLAB实现基于SVM-RFE-BP支持向量机递归特征消除特征选择算法结合BP神经网络的多输入单输出回归预测

回归预测 | MATLAB实现基于SVM-RFE-BP支持向量机递归特征消除特征选择算法结合BP神经网络的多输入单输出回归预测 目录 回归预测 | MATLAB实现基于SVM-RFE-BP支持向量机递归特征消除特征选择算法结合BP神经网络的多输入单输出回归预测预测效果基本介绍研究内容程序设计参考资料…...

配置root账户ssh免密登录并使用docker-machine构建docker服务

简介 Docker Machine是一种可以在多种平台上快速安装和维护docker运行环境&#xff0c;并支持多种平台&#xff0c;让用户可以在很短时间内在本地或云环境中搭建一套docker主机集群的工具。 使用docker-machine命令&#xff0c;可以启动、审查、停止、重启托管的docker 也可以…...

【力扣周赛】第357场周赛

【力扣周赛】第357场周赛 2810. 故障键盘题目描述解题思路 2811. 判断是否能拆分数组题目描述解题思路 2810. 故障键盘 题目描述 描述&#xff1a;你的笔记本键盘存在故障&#xff0c;每当你在上面输入字符 ‘i’ 时&#xff0c;它会反转你所写的字符串。而输入其他字符则可以…...

多线程案例(4)-线程池

文章目录 多线程案例四四、线程池 大家好&#xff0c;我是晓星航。今天为大家带来的是 多线程案例-线程池 相关的讲解&#xff01;&#x1f600; 多线程案例四 四、线程池 线程池是什么 虽然创建线程 / 销毁线程 的开销 想象这么一个场景&#xff1a; 在学校附近新开了一家…...

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample&#xff08;样本数&#xff09; 表示测试中发送的请求数量&#xff0c;即测试执行了多少次请求。 单位&#xff0c;以个或者次数表示。 示例&#xff1a;…...