Ant?Design-vue?解決input前后空格問(wèn)題(推薦)
更新時(shí)間：2022年10月26日 09:57:32 作者：周家大小姐.
最近做項(xiàng)目遇到這樣一個(gè)問(wèn)題輸入框不允許有前后空格但字符中間可以有空格，怎么解決這個(gè)問(wèn)題呢，接下來(lái)小編把a(bǔ)nt?Design-vue?解決input前后空格問(wèn)題的實(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前后空格問(wèn)題
*/
/**
* @description:解決input前后空格問(wèn)題
* \s：空格
* \uFEFF：字節(jié)次序標(biāo)記字符（Byte Order Mark），也就是BOM,它是es5新增的空白符
* \xA0：禁止自動(dòng)換行空白符，相當(dāng)于html中的
* @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前后空格問(wèn)題的文章就介紹到這了,更多相關(guān)ant Design-vue空格input內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue響應(yīng)式更新機(jī)制及不使用框架實(shí)現(xiàn)簡(jiǎn)單的數(shù)據(jù)雙向綁定問(wèn)題
vue是一款具有響應(yīng)式更新機(jī)制的框架，既可以實(shí)現(xiàn)單向數(shù)據(jù)流也可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。這篇文章主要介紹了vue響應(yīng)式更新機(jī)制及不使用框架實(shí)現(xiàn)簡(jiǎn)單的數(shù)據(jù)雙向綁定問(wèn)題,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了Antd的table組件表格的序號(hào)自增操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
vue實(shí)現(xiàn)將數(shù)據(jù)存入vuex中以及從vuex中取出數(shù)據(jù)
今天小編就為大家分享一篇vue實(shí)現(xiàn)將數(shù)據(jù)存入vuex中以及從vuex中取出數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
這篇文章主要介紹了vue中使用tinymce，以及插件powerpaste的使用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue項(xiàng)目熱更新的坑及解決方案，具有很好的參考價(jià)值，希望對(duì)的大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
cordova+vue+webapp使用html5獲取地理位置的方法
這篇文章主要介紹了2019-07-07
這篇文章主要介紹了在vue自定義組件中使用?v-model指令詳情，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-06-06
這篇文章主要介紹了詳解如何寫出一個(gè)利于擴(kuò)展的vue路由配置，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
這篇文章主要介紹了Vue組件之作用域插槽，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
今天小編就為大家分享一篇vue-dplayer 視頻播放器實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11