广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue中如何去掉input前后的空格
  • 673
分享到

vue中如何去掉input前后的空格

vue去掉input空格vue inputvue input 空格 2023-03-06 08:03:24 673人浏览 八月长安
摘要

目录Vue去掉input前后的空格写一个去除input框空格的vue指令使用方法源码总结vue去掉input前后的空格 场景:在开发过程中,遇到表单填写,用户可以自由输入 截图举例:

vue去掉input前后的空格

场景:在开发过程中,遇到表单填写,用户可以自由输入

截图举例:

这里,用户瞎输,填了几个空格,导致给后台发请求的时候,也带了好多空格,这种体验特别不好。因此在开发过程中,要考虑去空格的问题。

在vue 2.x中,v-model.trim就可以搞定,截图如下:

但是在vue1.x 中,v-model.trim 不生效,此时就不能这么改了。但是清楚底层原理,去掉字符串前后的空格原理就是v-model 的值,js里面trim方法就可以。

写一个去除input框空格的vue指令

使用方法

使用方法

源码

const handleBlurEvent = (e) => {
    e.target.value = e.target.value.trim();
    
	// 触发原生input事件
    let event = document.createEvent('htmlEvents');
    event.initEvent('input', true, true);
    e.target.dispatchEvent(event);
};

const bindInputBlurEvent = (node) => {
    if (node.tagName === 'INPUT') {
        node.onblur = handleBlurEvent;
    } else {
    	// 递归子节点
        Array.from(node.children).forEach((children) => {
            bindInputBlurEvent(children);
        });
    }
};

export default {
    bind(el) {
        bindInputBlurEvent(el);
    }
};

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue中如何去掉input前后的空格

本文链接: https://www.lsjlt.com/news/198521.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue中如何去掉input前后的空格
    目录vue去掉input前后的空格写一个去除input框空格的vue指令使用方法源码总结vue去掉input前后的空格 场景:在开发过程中,遇到表单填写,用户可以自由输入 截图举例:...
    99+
    2023-03-06
    vue去掉input空格 vue input vue input 空格
  • vue中怎么去掉input前后的空格
    本篇内容主要讲解“vue中怎么去掉input前后的空格”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue中怎么去掉input前后的空格”吧!vue去掉input前后的空格场景:在开发过程中,遇...
    99+
    2023-07-05
  • jquery如何去掉字符串前后的空格
    这篇文章主要介绍“jquery如何去掉字符串前后的空格”,在日常操作中,相信很多人在jquery如何去掉字符串前后的空格问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”jque...
    99+
    2022-10-19
  • 怎么在PHP中去掉字符串的前后空格
    这篇文章主要讲解了“怎么在PHP中去掉字符串的前后空格”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么在PHP中去掉字符串的前后空格”吧!方法一:通过trim()去掉字符串前后空...
    99+
    2023-07-05
  • php如何去掉字符串前的空格
    本文小编为大家详细介绍“php如何去掉字符串前的空格”,内容详细,步骤清晰,细节处理妥当,希望这篇“php如何去掉字符串前的空格”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一、使用 ltrim() 函...
    99+
    2023-07-06
  • php如何去掉最后一个空格
    这篇文章主要讲解了“php如何去掉最后一个空格”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“php如何去掉最后一个空格”吧!在php中可以通过rtrim函数去掉最后一个空格,其使用语法是“r...
    99+
    2023-06-20
  • php如何去掉中文空格
    这篇文章主要介绍“php如何去掉中文空格”,在日常操作中,相信很多人在php如何去掉中文空格问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”php如何去掉中文空格”的疑惑有所帮助!接下来,请跟着小编一起来学习吧...
    99+
    2023-06-20
  • jquery如何去除input值的空格
    这篇文章给大家分享的是有关jquery如何去除input值的空格的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 jquery去除input值空格的方法...
    99+
    2022-10-19
  • es6如何去除字符串前后空格
    本文小编为大家详细介绍“es6如何去除字符串前后空格”,内容详细,步骤清晰,细节处理妥当,希望这篇“es6如何去除字符串前后空格”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。去除前后空格的两种方法:1、直接使用t...
    99+
    2023-07-04
  • php如何去掉前后的逗号
    今天小编给大家分享一下php如何去掉前后的逗号的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。去掉前后逗号的方法:1、用tri...
    99+
    2023-06-30
  • php如何去掉字符串中的空格
    在php中去掉字符串中空格的方法使用trim函数去除字符串首尾两端的空格$str = ' Hello world! ';echo trim($str);输出结果为:Hello world!使用ltrim函数去除字符串首部的空格$s...
    99+
    2022-10-19
  • Shell中去除字符串前后空格的方法
    经常碰到的场景,需要去除字符串中的前后的空格。在Shell中不像其他语言有strip()来处理,不过也是可以使用诸如awk等命令来处理。  下面是一个简单示例: [root@localhost ~]# ec...
    99+
    2022-06-04
    shell去除字符串空格 shell中去除字符串前后空格的方法
  • word文档空格的点如何去掉
    若要去除Word文档中的空格,可以按照以下步骤操作:1. 打开Word文档。2. 按下Ctrl + H,打开“查找和替换”对话框。3...
    99+
    2023-09-29
    word
  • es6如何去掉字符串的空格
    今天小编给大家分享一下es6如何去掉字符串的空格的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下...
    99+
    2022-10-19
  • javascript如何去掉字符串中的空格符
    这篇文章主要讲解了“javascript如何去掉字符串中的空格符”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript如何去掉字符串中的空格符”...
    99+
    2022-10-19
  • php如何去掉数组中的空格元素
    今天小编给大家分享一下php如何去掉数组中的空格元素的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。两种方法:1、遍历数组,删...
    99+
    2023-06-30
  • 怎么在Shell中去除字符串前后的空格
    本篇文章给大家分享的是有关怎么在Shell中去除字符串前后的空格,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。 下面是一个简单示例:[root@localhost&n...
    99+
    2023-06-09
  • 利用java如何去掉文本中的空格与空行
    本篇文章为大家展示了利用java如何去掉文本中的空格与空行,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。需求按照如下要求处理字符串字符串中连续的空格数不能大于5,大于5时只保留5个字符串中含有的连续...
    99+
    2023-05-31
    java 何去 ava
  • php如何去掉数值左右的空格
    本篇内容主要讲解“php如何去掉数值左右的空格”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“php如何去掉数值左右的空格”吧!在PHP中,可以利用trim()函数去掉数值左右的空格,该...
    99+
    2023-06-29
  • php如何去掉字符串中的所有空格
    本篇内容主要讲解“php如何去掉字符串中的所有空格”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“php如何去掉字符串中的所有空格”吧!php去掉字符串中所有空格的方法:1、使用str_repla...
    99+
    2023-06-29
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作