input、textarea禁止输入空格,并绑定回车事件

一、原生环境

1. 禁止输入空格

<input type="text" v-model="value" οnkeyup="this.value=this.value.replace(/\s+/g,'')" />
<textarea type="text" v-model="value" οnkeyup="this.value=this.value.replace(/\s+/g,'')" />

2. 绑定回车键

<input type="text" v-model="value" @keydown.enter="confim" />
<textarea type="text" v-model="value" @keydown.enter="confim" />

注意1:textarea 回车会换行,所以需要处理一下,回车目的是提交,可以将内容清空。
注意2:vue 中的 trim() 方法没有用,不要用那个方式。

confim() {this.value = ''...
}

二、第三方UI组件库环境

Vant 举例(其它组件库原理相同),在组件库中,上面的方法无效,需要采用其它方法。

1. 禁止输入空格

<van-field v-model="form.data" :update:model-value="(form.data = form.data.replace(/\s+/g, ''))" />

如果觉得一个一个禁止太麻烦,也可以全局统一禁止。

vue2–main.js

import Vue from "vue";
import { Field } from "vant";Vue.use(Vant);
Vue.component(Field.name, {extends: Field,props: {formatter: {type: Function,default: function (value) {return value.replace(/\s+/g, "");},},},
});

2. 绑定回车键

与上面一样,使用 @keydown.enter 即可绑定。

<van-field v-model="form.data" @keydown.enter="confim" />

END

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

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

相关文章

IDEA安装MyBatisX插件

IDEA工具在开发人员中经常使用&#xff0c;从dao层到xml文件对应的查看很费劲&#xff0c;这时候就有相应的插件工具出现了MyBatisX。他的好处如下&#xff1a; mapper and xml can jump back and forth mybatis.xml,mapper.xml prompt mapper and xml support auto prompt lik…

将多个excel文件中的特定数据汇总到一个excel中

比如5000个excel文件中都有1月2日的交易数据。现在需要将每个文件中1月2日的数据提出来&#xff0c;组成一个新的excel文件&#xff0c;即1月2日的交易数据文件&#xff0c;以1月2日命名。下面的程序是将5000只股票1月2日的交易数据提出来&#xff0c;形成一个1月2日所有股票的…

Netty核心——Reactor下篇(十)

任务队列中的Task有3种典型使用场景 用户程序自定义的普通任务 比如有一个非常耗时长的业务 异步执行提交该Channel对应的NioEventLoop的TaskQueue中 用户自定义定时任务 该任务提交到scheduleTaskQueue中 非当前Reactor线程调用Channel的各种方法 例如在推送系统的业务线程…

大数据StarRocks(八):资源隔离实战

前言 自 2.2 版本起&#xff0c;StarRocks 支持资源组管理&#xff0c;集群可以通过设置资源组&#xff08;Resource Group&#xff09;的方式限制查询对资源的消耗&#xff0c;实现多租户之间的资源隔离与合理利用。在 2.3 版本中&#xff0c;StarRocks 支持限制大查询&#…

Apache Paimon基础记录

基本都是在官网的学习&#xff0c;简单记录一下其中的核心特点 Apache Paimon 官网 Apache Paimon | Apache Paimon 根据官网介绍去快速了解 paimon 是用来设计做什么&#xff0c;可以做什么&#xff0c;对比与其他数据湖有什么特点&#xff0c;如何使用 Paimon 特点 前身…

酒鬼酒2024年展望:稳发展动能,迈入恢复性增长轨道

文 | 琥珀酒研社 作者 | 渡过 最近几个月来&#xff0c;白酒估值回落到近十年来低位&#xff0c;反映出了整个白酒行业的市场低迷和虚弱现状。不管是头部企业五粮液、泸州老窖&#xff0c;还是区域酒企口子窖、金种子酒等&#xff0c;最近都通过“回购”或“增持”&#xff0…

【C语言】【力扣】刷题小白的疑问

一、力扣做题时的答案&#xff0c;没有完整的框架 疑问&#xff1a; 在学习C语言的初始&#xff0c;就知道C语言程序离不开下面这个框架&#xff0c;为什么力扣题的解答往往没有这个框架&#xff1f; #include <stdio.h>int main() {return 0; } 解答&#xff1a; 力扣平…

常用直线检测算法

概述 在计算机视觉领域&#xff0c;我们经常需要做一些特殊的任务&#xff0c;而这些任务中经常会用到直线检测算法&#xff0c;比如车道线检测、长度测量等。– 资料 直线检测算法汇总_技术挖掘者的博客-CSDN博客_直线检测算法 直线检测算法博文中缺失的几个源码(Hough_lin…

联想乐商店更新安卓APK错误处理

当你点击“重新提交”&#xff0c;联想开放平台会卡死 其实他们的网页是有BUG的。HTTP GET appDetail请求会有个服务器内部错误 联系了联想客服&#xff0c;他们的绕过去方案是&#xff0c;你要选择“已上架” 然后再更新版本就可以了

手把手带你死磕ORBSLAM3源代码(六十三) LocalMapping.cc LocalMapping

目录 一.前言 二.代码 2.1 完整代码 一.前言 LocalMapping类主要负责处理局部地图的构建和优化。它接收来自相机的图像数据,提取特征点,并与先前帧的特征点进行匹配,以估计相机的运动并更新地图。 以下是关于代码的一些详细说明: LocalMapping的构造函数(LocalMappin…

Alzet 代理商,你知道是什么吗?

代理商、供应商傻傻分不清楚。在购买产品时或者在搜索商品时&#xff0c;有些产品会出现代理商、供应商的字样。你知道它们的区别么&#xff1f; 下面&#xff0c;我们就简单了解下Alzet 供应商与Alzet 代理商分别是什么&#xff1f;以及Alzet 渗透泵的产品概况吧。 Alzet 供…

【Python机器学习系列】建立XGBoost模型预测心脏疾病(完整实现过程)

一、引言 前文回顾&#xff1a; 一文彻底搞懂机器学习中的归一化与反归一化问题 【Python机器学习系列】一文彻底搞懂机器学习中表格数据的输入形式&#xff08;理论源码&#xff09; 【Python机器学习系列】一文带你了解机器学习中的Pipeline管道机制&#xff08;理论源码…

【Python】03快速上手爬虫案例三:搞定药师帮

文章目录 前言1、破解验证码2、获取数据 前言 提示&#xff1a;通过用户名、密码、搞定验证码&#xff0c;登录进药师帮网站&#xff0c;然后抓取想要的数据。 爬取数据&#xff0c;最终效果图&#xff1a; 1、破解验证码 使用药师帮测试系统&#xff1a;https://dianrc.ysb…

2024 高级前端面试题之 HTML 「精选篇」

该内容主要整理关于 HTML 的相关面试题&#xff0c;其他内容面试题请移步至 「最新最全的前端面试题集锦」 查看。 HTML模块精选篇 1. 如何理解HTML语义化2. H5的新特性有哪些3. 说一下 HTML5 Drag API4. iframe有那些缺点5. 如何实现浏览器内多个标签页之间的通信6. 简述一下s…

Elasticsearch:如何为 Elastic Stack 配置 AI Assistant

了解并安装 Elastic AI Assistant Elastic 推出了 Observability AI Assistant&#xff0c;这是一款利用生成式 AI 来增强你的 Observability 体验的强大工具。 该 AI 助手由 OpenAI 或 Azure OpenAI 服务的连接器提供支持&#xff0c;可带来上下文洞察和聊天功能&#xff0c;…

104.乐理基础-五线谱-中音谱号、次中音谱号

内容参考于&#xff1a;三分钟音乐社 上一个内容&#xff1a;103.乐理基础-五线谱-低音谱号-CSDN博客 上一个内容练习答案&#xff1a; 常用的谱号就是下图所示的四个&#xff0c;其中高音谱号与低音谱号已经在上一个内容和上上一个内容中写过了&#xff0c;音乐中百分之九十…

html css实现钟表简单移动

文章目录 一、实现钟表简单移动二、HTML三、CSS四、热门文章 一、实现钟表简单移动 下面是一个使用HTML和CSS实现简单移动的钟表的示例代码&#xff1a; <!DOCTYPE html> <html><head><style>.clock {width: 200px;height: 200px;border-radius: 50%…

微服务架构实施攻略:如何选择合适的微服务安全保障策略?

随着业务的快速发展和系统的日益复杂&#xff0c;传统的单体应用逐渐显露出瓶颈&#xff0c;已无法满足现代软件研发的需求。微服务架构作为一种灵活、可扩展的解决方案&#xff0c;通过将复杂系统拆分为一系列小型服务来提高系统的可伸缩性、灵活性和可维护性。在实施微服务架…

【C++历练之路】探秘C++三大利器之一——多态

W...Y的主页 &#x1f60a; 代码仓库分享&#x1f495; 前言&#x1f354;: 在计算机科学的广袤领域中&#xff0c;C多态性是一门令人着迷的技术艺术&#xff0c;它赋予我们的代码更强大的灵活性和可维护性。想象一下&#xff0c;你正在构建一个程序&#xff0c;需要适应不断…

python3.8 安装缺少ssl、_ctypes模块解决办法

问题 安装pyhton3.8安装默认不依赖ssl 运行Flask项目时报错&#xff1a; Traceback (most recent call last):File "/usr/local/python3/bin/flask", line 8, in <module>sys.exit(main())File "/usr/local/python3/lib/python3.8/site-packages/flask…