快捷導(dǎo)航

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

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

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

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

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

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é)次序標(biāo)記字符（Byte Order Mark），也就是BOM,它是es5新增的空白符
 * \xA0：禁止自動(dòng)換行空白符，相當(dāng)于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來(lái)去除內(nèi)容中的前后空格

<el-input type="textarea" placeholder="請(qǐng)輸入報(bào)表名稱" v-model.trim="formData.name" maxlength="50">

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

您可能感興趣的文章:

相關(guān)文章

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