vue中如何去掉input前后的空格
更新時間：2023年03月04日 13:51:50 作者：~?climber?~
這篇文章主要介紹了vue中如何去掉input前后的空格問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue去掉input前后的空格
場景：在開發(fā)過程中，遇到表單填寫，用戶可以自由輸入
截圖舉例：
這里，用戶瞎輸，填了幾個空格，導致給后臺發(fā)請求的時候，也帶了好多空格，這種體驗特別不好。因此在開發(fā)過程中，要考慮去空格的問題。
在vue 2.x中，v-model.trim就可以搞定，截圖如下：
但是在vue1.x 中，v-model.trim 不生效，此時就不能這么改了。但是清楚底層原理，去掉字符串前后的空格原理就是v-model 的值，js里面trim方法就可以。
寫一個去除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é)點
Array.from(node.children).forEach((children) => {
bindInputBlurEvent(children);
});
}
};
export default {
bind(el) {
bindInputBlurEvent(el);
}
};
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue el-row中ul間距問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
本文主要介紹了手摸手教你實現(xiàn)Vue3 Reactivity，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
javascript中Set、Map、WeakSet、WeakMap區(qū)別
這篇文章主要介紹了javascript中Set、Map、WeakSet、WeakMap區(qū)別,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細介紹了vue+element ui實現(xiàn)錨點定位，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
element?table?表格控件實現(xiàn)單選功能
本文主要介紹了element?table?表格控件實現(xiàn)單選功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
這篇文章交詳細的給大家介紹了vue組件中slot的用法，主要是讓組件的可擴展性更強，具體內(nèi)容詳情大家參考下本文2018-01-01
vue 設置 input 為不可以編輯的實現(xiàn)方法
今天小編就為大家分享一篇vue 設置 input 為不可以編輯的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
本篇文章主要介紹了詳解Vue爬坑之vuex初識 ，Vue 的狀態(tài)管理工具 Vuex可以解決大型項目中子組件之間傳遞數(shù)據(jù)，有興趣的可以了解下2017-06-06
詳解vue-cli 構(gòu)建項目 vue-cli請求后臺接口 vue-cli使用axios、sass、swiper
本文通過實例代碼給大家詳細介紹了vue-cli 構(gòu)建項目 vue-cli請求后臺接口 vue-cli使用axios、sass、swiper的相關(guān)知識,需要的朋友可以參考下2018-05-05
下面小編就為大家?guī)硪黄趘ue.js路由參數(shù)的實例講解——簡單易懂。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09