vue.js 輸入框輸入值自動(dòng)過(guò)濾特殊字符替換中問(wèn)標(biāo)點(diǎn)操作
我就廢話不多說(shuō)了,大家還是直接看代碼吧~
<Input v-model="relatedWords" type="textarea" placeholder="請(qǐng)輸入" @input='verifyInput(formItem.relatedWords)'/>
verifyInput(v){ let _this=this; let punctuation = /[`~!@#$%^&*_\-=<>?:"{}|.\/;'\\[\]·~!@#¥%……&——\-={}|《》?:“”【】、;‘'。、]/im; let arr=v.split('') let str='' arr.map(i=>{ if(!punctuation.test(i)){ str+=i } }) str=str.replace(/(/g,'(') str=str.replace(/)/g,')') str=str.replace(/,/g,',') this.$nextTick(j=>{ this.relatedWords=str }) },
補(bǔ)充知識(shí):vue el-input 禁止輸入特殊字符 只可輸入數(shù)字 正則驗(yàn)證
我就廢話不多說(shuō)了,大家還是直接看代碼吧~
<el-input size="small" v-model="city" placeholder="請(qǐng)輸入城市名稱" @blur="addCity(scope.$index)" @keyup.native="btKeyUp" @keydown.native="btKeyDown" ></el-input> // methods內(nèi) // 只能輸入漢字、英文、數(shù)字 btKeyDown(e) { e.target.value = e.target.value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,""); }, //限制輸入特殊字符 btKeyUp(e) { e.target.value = e.target.value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘',。、]/g,""); }
在el-input 內(nèi) 使用 keyup等事件 需要添加 .native 否則無(wú)法正常執(zhí)行事件
下面是 只可輸入數(shù)字
<el-input size="small" v-model="scope.row.order_number" v-show="scope.row.isShowInp_order" @blur="editOrder(scope.$index,scope.row)" v-focus @keyup.native="UpNumber" @keydown.native="UpNumber" class="table_input" ></el-input> // 只可輸入數(shù)字 UpNumber(e) { e.target.value = e.target.value.replace(/[^\d]/g,""); }
以上這篇vue.js 輸入框輸入值自動(dòng)過(guò)濾特殊字符替換中問(wèn)標(biāo)點(diǎn)操作就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue插件v-touch的坑及解決(不能上下滑動(dòng))
這篇文章主要介紹了vue插件v-touch的坑及解決(不能上下滑動(dòng)),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03聊聊Vue 中 title 的動(dòng)態(tài)修改問(wèn)題
這篇文章主要介紹了 Vue 中 title 的動(dòng)態(tài)修改問(wèn)題,文中通過(guò)兩種方案給大家介紹了title的傳遞問(wèn)題 ,需要的朋友可以參考下2019-06-06vue+axios 前端實(shí)現(xiàn)登錄攔截的兩種方式(路由攔截、http攔截)
本文通過(guò)實(shí)例代碼給大家介紹了vue+axios 前端實(shí)現(xiàn)登錄攔截的方法,主要通過(guò)路由攔截和http攔截,具體實(shí)例代碼大家跟隨小編一起通過(guò)本文學(xué)習(xí)吧2018-10-10vue+tsc+noEmit導(dǎo)致打包報(bào)TS類型錯(cuò)誤問(wèn)題及解決方法
當(dāng)我們新建vue3項(xiàng)目,package.json文件會(huì)自動(dòng)給我添加一些配置選項(xiàng),這寫選項(xiàng)基本沒(méi)有問(wèn)題,但是在實(shí)際操作過(guò)程中,當(dāng)項(xiàng)目越來(lái)越復(fù)雜就會(huì)出現(xiàn)問(wèn)題,本文給大家分享vue+tsc+noEmit導(dǎo)致打包報(bào)TS類型錯(cuò)誤問(wèn)題及解決方法,感興趣的朋友一起看看吧2023-10-10Vue中實(shí)現(xiàn)表單地區(qū)選擇與級(jí)聯(lián)聯(lián)動(dòng)示例詳解
這篇文章主要為大家介紹了Vue中實(shí)現(xiàn)表單地區(qū)選擇與級(jí)聯(lián)聯(lián)動(dòng)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09Vue+Element實(shí)現(xiàn)封裝抽屜彈框
這篇文章主要為大家詳細(xì)介紹了如何利用Vue和Element實(shí)現(xiàn)簡(jiǎn)單的抽屜彈框效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-06-06