vue.js 輸入框輸入值自動過濾特殊字符替換中問標點操作
更新時間：2020年08月31日 11:03:59 作者：一行注釋
這篇文章主要介紹了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項目啟動如何設(shè)置默認啟動頁問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
在new Vue的配置參數(shù)中的computed和methods都可以處理大量的邏輯代碼，但是什么時候用哪個屬性，要好好區(qū)分一下才能做到正確的運用vue。這篇文章主要介紹了Vue中method與computed的區(qū)別,需要的朋友可以參考下2018-03-03
vue3.0在子組件中觸發(fā)的父組件函數(shù)方式
這篇文章主要介紹了vue3.0在子組件中觸發(fā)的父組件函數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了nuxt靜態(tài)部署打包相對路徑操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
解決vue2 在mounted函數(shù)無法獲取prop中的變量問題
這篇文章主要介紹了vue2 在mounted函數(shù)無法獲取prop中的變量的解決方法 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
vue項目中常用解決跨域的方法總結(jié)(CORS和Proxy)
在vue項目中,一般我們會遇到跨域的問題,vue項目中解決跨域是非常簡單的,下面這篇文章主要給大家介紹了關(guān)于vue項目中常用解決跨域的方法,主要解釋CROS和Proxy兩種方式,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了詳解Vuex管理登錄狀態(tài),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
vue-cli創(chuàng)建項目及項目結(jié)構(gòu)解析
上一篇我們安裝了vue-cli，接下來我們就使用該腳手架進行創(chuàng)建項目，這篇文章主要介紹了vue-cli創(chuàng)建項目以及項目結(jié)構(gòu)的相關(guān)資料,需要的朋友可以參考下面文章的具體內(nèi)容2021-10-10
vue中使用pdfjs-dist?+?turnjs實現(xiàn)頁面的翻書瀏覽功能
這篇文章主要介紹了vue中使用pdfjs-dist?+?turnjs實現(xiàn)頁面的翻書瀏覽,通過本文學(xué)習(xí)我們知道了pdfjs-dist 的工作原理是把獲取到的 pbf 的文件的數(shù)據(jù)流， 利用 canvas轉(zhuǎn)換成圖片，本文通過實例代碼詳解講解，需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue如何根據(jù)數(shù)值判斷顏色問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03