vue中如何去掉input前后的空格
vue去掉input前后的空格
場景:在開發(fā)過程中,遇到表單填寫,用戶可以自由輸入
截圖舉例:
這里,用戶瞎輸,填了幾個空格,導(dǎo)致給后臺發(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)文章
前端設(shè)置cookie之vue-cookies使用及說明
這篇文章主要介紹了前端設(shè)置cookie之vue-cookies使用及說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-05-05vue內(nèi)置動態(tài)組件component使用示例小結(jié)
component是vue內(nèi)置組件,主要作用為動態(tài)渲染組件,這篇文章主要介紹了vue內(nèi)置動態(tài)組件component使用示例小結(jié),需要的朋友可以參考下2024-03-03vite+ts vite.config.ts使用path報錯問題及解決
這篇文章主要介紹了vite+ts vite.config.ts使用path報錯問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10vue 2.1.3 實時顯示當(dāng)前時間,每秒更新的方法
今天小編就為大家分享一篇vue 2.1.3 實時顯示當(dāng)前時間,每秒更新的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09