快捷導(dǎo)航

vue自定義指令限制輸入框輸入值的步驟與完整代碼

更新時(shí)間：2020年08月30日 16:51:10 作者：小豪看世界

這篇文章主要給大家介紹了關(guān)于vue自定義指令限制輸入框輸入值的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

需求

前端開發(fā)過程中，經(jīng)常遇到表單校驗(yàn)的需求，比如校驗(yàn)用戶輸入框的內(nèi)容，限制用戶只能輸入數(shù)字。

本文內(nèi)容基于 element-ui，el-form 組件可以綁定 model、rule 用于表單內(nèi)容校驗(yàn)，但如果有多個(gè)表單多個(gè)輸入框那就得寫很多個(gè) rule，雖然方法可以通用可是使用起來也是比較繁瑣的，可通過自定義執(zhí)行實(shí)現(xiàn)一次注冊(cè)，多次使用。

Vue 自定義指令

我們使用 el-input 作為表單的輸入框

1. 先注冊(cè)一個(gè)自定義指令

import Vue from 'vue';

Vue.directive('LimitInputNumber', {
 bind(el) {
 # do something
 },
});

2.使用自定義指令

直接在組件內(nèi)綁定 v-limit-input-number 指令

<el-input v-limit-input-number />

3.指令內(nèi)部校驗(yàn)

onkeypress 事件

onkeypress 事件會(huì)在鍵盤按鍵被按下并釋放一個(gè)鍵時(shí)發(fā)生

可在事件觸發(fā)時(shí)檢測(cè)若輸入的值不為數(shù)字，直接返回 fales

Vue.directive('LimitInputNumber', {
 bind(el) {
 el.onkeypress = (event) => {
  return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8;
 };
 },
});

但該事件存在一個(gè)問題，就是在中文輸入法的時(shí)候無法觸發(fā)事件，導(dǎo)致用戶可以輸入中文

oninput 事件

oninput 事件在用戶輸入時(shí)觸發(fā)

可在事件觸發(fā)時(shí)進(jìn)行過濾，過濾掉那些不為數(shù)字的值，并重新綁定到輸入框上，解決了中文輸入法下的問題

Vue.directive('LimitInputNumber', {
 bind(el) {
  el.oninput = () => {
   el.children[0].value = el.children[0].value.replace(/\D/ig, '');
  };
 },
});

完整代碼

import Vue from 'vue';

Vue.directive('LimitInputNumber', {
 bind(el) {
  el.onkeypress = (event) => {
   return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8;
  };
  el.oninput = () => {
   el.children[0].value = el.children[0].value.replace(/\D/ig, '');
  };
 },
});

總結(jié)

到此這篇關(guān)于vue自定義指令限制輸入框輸入值的文章就介紹到這了,更多相關(guān)vue自定義指令限制輸入框輸入值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: