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

这篇具有很好参考价值的文章主要介绍了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>

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

实现

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 = newVal
        dispatchEvent(inputEle, 'input')
      }
    }
    el.inputEle = inputEle
    el._blurHandler = handler
    inputEle.addEventListener('blur', handler)
  },
  unbind(el) {
    const { inputEle } = el
    inputEle.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去空格,vue,vue.js,elementui,前端文章来源地址https://www.toymoban.com/news/detail-634606.html

到了这里,关于vue去掉所有输入框两边空格,封装指令去空格,支持Vue2和Vue3,ElementUI Input去空格的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 如何用c语言去掉空格

    在 C 语言中,可以使用以下方法去掉空格: 使用 scanf 和 %[^ ] 的格式字符:

    2024年02月12日
    浏览(30)
  • [LINUX]之字符串去掉前后空格

    去掉字符串前后空格通过使用awk \\\'$1=$1\\\'命令实现 echo \\\" test \\\" | awk \\\'$1=$1\\\'  

    2024年02月16日
    浏览(46)
  • Python如何去掉字符串的空格?

    Python去掉字符串所有空格的方法大致有五种,本篇文章通过代码实例为大家详细的介绍一下这五种方法,对学习Python的小伙伴非常具有参考价值,快跟着小编来学习一下吧。 1、strip()方法,去除字符串开头或者结尾的空格 a = \\\"a b c\\\" a.strip() \\\'a b c\\\' 2、lstrip()方法,去除字符串开头

    2024年02月08日
    浏览(52)
  • Vue + TS 封装全局自定义指令

    在 Vue 中,指令是一种特殊的语法,用于在 DOM 元素上添加特定的行为。Vue 提供了许多内置指令,如 v-if 、 v-for 、 v-bind 等,但是在实际开发中,我们可能需要封装一些自定义指令来满足特定的需求。 本文将介绍如何使用 TypeScript 封装全局自定义指令。 在 Vue 中,我们可以使

    2024年02月12日
    浏览(41)
  • Vue05_关于插槽和指令封装的运用

    2024年02月10日
    浏览(36)
  • 车牌输入框 封装 (小程序 vue)

    .wxml .js .json .wxss

    2024年02月11日
    浏览(42)
  • Vue自定义指令- v-loading封装

    01-自定义指令 什么是自定义指令? 自定义指令:自己定义的指令,可以 封装一些dom操作 ,扩展额外功能。 1、例如:完成自动聚焦的功能: 自定义指令的两种注册语法: 全局注册-语法:

    2024年02月11日
    浏览(34)
  • 【Vue】vue3 v-draggable 拖拽指令封装

    需求:实现一个拖拽指令,可在父元素区域任意拖拽元素,同时如果传入的值为 father,则拖拽的时候以父元素为拖拽对象 思路: 1、设置需要拖拽的元素为absolute,其父元素为relative。 2、鼠标按下(onmousedown)时记录目标元素当前的 left 和 top 值。 3、鼠标移动(onmousemove)时计算每

    2024年02月16日
    浏览(32)
  • Hive学习(11)hive去除空格或去掉字符串前后或中间的某一字符串

    问题: 需求:需要去除字符串中前N位/后N位指定字符 例如:11ABC11 MySQL中可使用以下函数解决: Hive中可使用以下函数解决: 其他函数亦可利用正则表达式规则自行变换替代。

    2024年02月12日
    浏览(41)
  • vue3 封装自定义指令,监听元素宽高的变化

    最近做一个项目,涉及到echart图,要去根据父元素去自适应宽高,所以需要监听到元素的宽高变化、 因为是 监听某一元素的宽高变化 ,所以这里用的是 ResizeObserver. ResizeObserver 是可以监听到DOM元素,宽高的变化,需要注意的一点就是监听出变化结果是contentBox的宽度和高度。

    2024年02月07日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包