vue中怎么去掉input前后的空格

本篇內(nèi)容主要講解“vue中怎么去掉input前后的空格”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“vue中怎么去掉input前后的空格”吧!

vue去掉input前后的空格

場(chǎng)景：在開(kāi)發(fā)過(guò)程中，遇到表單填寫(xiě)，用戶可以自由輸入

截圖舉例：

這里，用戶瞎輸，填了幾個(gè)空格，導(dǎo)致給后臺(tái)發(fā)請(qǐng)求的時(shí)候，也帶了好多空格，這種體驗(yàn)特別不好。因此在開(kāi)發(fā)過(guò)程中，要考慮去空格的問(wèn)題。

在vue 2.x中，v-model.trim就可以搞定，截圖如下：

但是在vue1.x 中，v-model.trim 不生效，此時(shí)就不能這么改了。但是清楚底層原理，去掉字符串前后的空格原理就是v-model 的值，js里面trim方法就可以。

寫(xiě)一個(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);
    }
};

到此，相信大家對(duì)“vue中怎么去掉input前后的空格”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！