vue.js 輸入框輸入值自動過濾特殊字符替換中問標點操作
我就廢話不多說了,大家還是直接看代碼吧~
<Input v-model="relatedWords" type="textarea" placeholder="請輸入" @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
})
},
補充知識:vue el-input 禁止輸入特殊字符 只可輸入數(shù)字 正則驗證
我就廢話不多說了,大家還是直接看代碼吧~
<el-input
size="small"
v-model="city"
placeholder="請輸入城市名稱"
@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 否則無法正常執(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 輸入框輸入值自動過濾特殊字符替換中問標點操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue+axios 前端實現(xiàn)登錄攔截的兩種方式(路由攔截、http攔截)
本文通過實例代碼給大家介紹了vue+axios 前端實現(xiàn)登錄攔截的方法,主要通過路由攔截和http攔截,具體實例代碼大家跟隨小編一起通過本文學習吧2018-10-10
vue+tsc+noEmit導致打包報TS類型錯誤問題及解決方法
當我們新建vue3項目,package.json文件會自動給我添加一些配置選項,這寫選項基本沒有問題,但是在實際操作過程中,當項目越來越復雜就會出現(xiàn)問題,本文給大家分享vue+tsc+noEmit導致打包報TS類型錯誤問題及解決方法,感興趣的朋友一起看看吧2023-10-10
Vue中實現(xiàn)表單地區(qū)選擇與級聯(lián)聯(lián)動示例詳解
這篇文章主要為大家介紹了Vue中實現(xiàn)表單地區(qū)選擇與級聯(lián)聯(lián)動示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09

