vue中如何去掉input前后的空格
更新時(shí)間：2023年03月04日 13:51:50 作者：~?climber?~
這篇文章主要介紹了vue中如何去掉input前后的空格問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue去掉input前后的空格
場景：在開發(fā)過程中，遇到表單填寫，用戶可以自由輸入
截圖舉例：
這里，用戶瞎輸，填了幾個(gè)空格，導(dǎo)致給后臺(tái)發(fā)請(qǐng)求的時(shí)候，也帶了好多空格，這種體驗(yàn)特別不好。因此在開發(fā)過程中，要考慮去空格的問題。
在vue 2.x中，v-model.trim就可以搞定，截圖如下：
但是在vue1.x 中，v-model.trim 不生效，此時(shí)就不能這么改了。但是清楚底層原理，去掉字符串前后的空格原理就是v-model 的值，js里面trim方法就可以。
寫一個(gè)去除input框空格的vue指令
使用方法
源碼
const handleBlurEvent = (e) => {
e.target.value = e.target.value.trim();
// 觸發(fā)原生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 {
// 遞歸子節(jié)點(diǎn)
Array.from(node.children).forEach((children) => {
bindInputBlurEvent(children);
});
}
};
export default {
bind(el) {
bindInputBlurEvent(el);
}
};
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
前端設(shè)置cookie之vue-cookies使用及說明
這篇文章主要介紹了前端設(shè)置cookie之vue-cookies使用及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue內(nèi)置動(dòng)態(tài)組件component使用示例小結(jié)
component是vue內(nèi)置組件,主要作用為動(dòng)態(tài)渲染組件,這篇文章主要介紹了vue內(nèi)置動(dòng)態(tài)組件component使用示例小結(jié),需要的朋友可以參考下2024-03-03
vite+ts vite.config.ts使用path報(bào)錯(cuò)問題及解決
這篇文章主要介紹了vite+ts vite.config.ts使用path報(bào)錯(cuò)問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue 2.1.3 實(shí)時(shí)顯示當(dāng)前時(shí)間,每秒更新的方法
今天小編就為大家分享一篇vue 2.1.3 實(shí)時(shí)顯示當(dāng)前時(shí)間,每秒更新的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue使用插槽分發(fā)內(nèi)容slot的用法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue3實(shí)現(xiàn)一個(gè)可左右滑動(dòng)操作組件的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用Vue3實(shí)現(xiàn)一個(gè)可左右滑動(dòng)操作組件，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定幫助，感興趣的可以學(xué)一下2022-11-11
本文主要介紹了vue3使用reactive賦值后頁面不改變，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了基于Vue實(shí)現(xiàn)微信小程序的圖文編輯器,由于微信小程序不能使用常規(guī)的圖文編輯器(比如百度的UEditor )編輯新聞內(nèi)容之類的，所以用vue寫了個(gè)針對(duì)小程序用的圖文編輯器需要的朋友可以參考下2018-07-07
下面小編就為大家?guī)硪黄獀ue2.X組件學(xué)習(xí)心得(新手必看篇)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
本篇文章主要介紹了通過命令行生成vue項(xiàng)目框架的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07