Ant?Design-vue?解決input前后空格問題(推薦)

更新時間：2022年10月26日 09:57:32 作者：周家大小姐.

最近做項目遇到這樣一個問題輸入框不允許有前后空格但字符中間可以有空格，怎么解決這個問題呢，接下來小編把ant?Design-vue?解決input前后空格問題的實現(xiàn)代碼分享給大家，感興趣的朋友一起看看吧

需求:輸入框不允許有前后空格但字符中間可以有空格

我這里是封裝成全局自定義指令,如果同學要用的話根據(jù)自己需求放入對應文件即可

index.js

/*
 * @Author: 周云芳 164591357@qq.com
 * @Date: 2022-10-25 16:11:21
 * @LastEditors: 周云芳 164591357@qq.com
 * @LastEditTime: 2022-10-25 16:43:46
 * @FilePath: \zhhq-front-web\src\directive\input-trim\index.js
 * @Description: 解決input前后空格問題
 */
/**
 * @description:解決input前后空格問題
 * \s：空格
 * \uFEFF：字節(jié)次序標記字符（Byte Order Mark），也就是BOM,它是es5新增的空白符
 * \xA0：禁止自動換行空白符，相當于html中的&nbsp;
 * @return {*}
 */
export default {
  inserted: (el, binding) => {
    setTimeout(() => {
      el.oninput = () => {
        el.value = el.value.replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '')
      }
      el.onblur = () => {
        el.value = el.value.replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '')
      }
    }, 100)
  }
}

Vue Element 去除input前后空格

在el-input中可以使用v-model.trim來去除內(nèi)容中的前后空格

<el-input type="textarea" placeholder="請輸入報表名稱" v-model.trim="formData.name" maxlength="50">

到此這篇關于Ant Design-vue 解決input前后空格問題的文章就介紹到這了,更多相關ant Design-vue空格input內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue的路由及路由鉤子函數(shù)的實現(xiàn)
這篇文章主要介紹了Vue的路由及路由鉤子函數(shù)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-07-07
vue實現(xiàn)父子組件之間的通信以及兄弟組件的通信功能示例
這篇文章主要介紹了vue實現(xiàn)父子組件之間的通信以及兄弟組件的通信功能,結合實例形式分析了vue.js組件間通信相關操作技巧,需要的朋友可以參考下
2019-01-01
vue watch監(jiān)聽數(shù)據(jù)變化的案例詳解
監(jiān)聽數(shù)據(jù)變化，在Vue中是通過偵聽器來實現(xiàn)的，你也可以將它理解為監(jiān)聽器，時刻監(jiān)聽某個數(shù)據(jù)的變化，本文將通過代碼示例為大家詳細的介紹一下vue watch如何監(jiān)聽數(shù)據(jù)變化,需要的朋友可以參考下
2023-07-07
vue+iview動態(tài)渲染表格詳解
這篇文章主要為大家詳細介紹了vue+iview動態(tài)渲染表格的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-03-03
vue中使用echarts以及簡單關系圖的點擊事件方式
這篇文章主要介紹了vue中使用echarts以及簡單關系圖的點擊事件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-06-06
詳解Vue2.X的路由管理記錄之鉤子函數(shù)（切割流水線）
本篇文章主要介紹了Vue2.X的路由管理記錄之鉤子函數(shù)（切割流水線），具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05
Vue實現(xiàn)天氣預報小應用
這篇文章主要為大家詳細介紹了Vue實現(xiàn)天氣預報小應用，查詢一些城市的天氣情況，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
Vue組件間的雙向綁定示例解析
這篇文章主要介紹了Vue組件間的雙向綁定，我們都知道當父組件改變了某個值后，如果這個值傳給了子組件，那么子組件也會自動跟著改變，但是這是單向的，使用v-bind的方式，即子組件可以使用父組件的值，但是不能改變這個值
2023-03-03
Vue3?響應式高階用法之customRef()的使用
customRef()是Vue3的高級工具,允許開發(fā)者創(chuàng)建具有復雜依賴跟蹤和自定義更新邏輯的ref對象,本文詳細介紹了customRef()的使用場景、基本用法、功能詳解以及最佳實踐,包括防抖、異步更新等用例,旨在幫助開發(fā)者更好地理解和使用這一強大功能
2024-09-09
vue前端HbuliderEslint實時校驗自動修復設置
這篇文章主要為大家介紹了vue前端中Hbulider中Eslint實時校驗自動修復設置操作過程，有需要的朋友可以借鑒參考下希望能夠有所幫助
2021-10-10