vue.js 輸入框輸入值自動過濾特殊字符替換中問標(biāo)點操作
更新時間：2020年08月31日 11:03:59 作者：一行注釋
這篇文章主要介紹了vue.js 輸入框輸入值自動過濾特殊字符替換中問標(biāo)點操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
我就廢話不多說了，大家還是直接看代碼吧~
<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 輸入框輸入值自動過濾特殊字符替換中問標(biāo)點操作就是小編分享給大家的全部內(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