VUE通过自定义指令，只允许输入大写英文以及数字

在写之前需要知道几个功能对象的作用；

首先输入框输入的情况有键盘输入和粘贴输入的情况

用到的组件有：

input.onblur-onblur：事件会在对象失去焦点时发生。Onblur 经常用于Javascript验证代码，一般用于表单输入框。详情

input.onkeyup：onkeyup 事件会在键盘按键被松开时发生。详情

接着就开始编写vue的自定义指令代码了：

html

<el-input id="valueInput" v-model="value" v-Alphabet placeholder="输入框"></el-input>

js

import Vue from "vue";
Vue.directive('Alphabet',{inserted: function (el) {const input = el.querySelector('#valueInput');input.onkeyup = function (e) {input.value = input.value.replace(/[^A-Z0-9]/g, '')}input.onblur = function (e) {input.value = input.value.replace(/[^A-Z0-9]/g, '')}}
});

效果就是输入不符合规则的字符会自动清除。

VUE通过自定义指令，只允许输入大写英文以及数字相关推荐

VUE：自定义指令（directives ）选项的用法
自定义指令分为全局指令和局部指令.全局指令可在任意vue组件内生效,局部指令仅在注册了指令的组件内生效. 全局指令和局部指令写法几乎相同.全局指令是在main.js内使用Vue.directive注册 ...
Vue的自定义指令以及Vue自定义指令的应用场景
前言一.Vue的自定义指令分为? vue中除了核心功能内置的指令外,也允许注册自定义指令.有的情况下,对普通DOM元素进行底层操作,这时候就会用到自定义指令. 自定义指令分为全局自定义指令和局部的自 ...
Vue.js自定义指令的用法与实例
市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...
js：Vue.js自定义指令实现scroll下滑滚动翻页
Vue.js自定义指令实现scroll下滑滚动翻页核心代码 import Vue from 'vue'// v-scroll Vue.directive('scroll', {bind(el, bi ...
vue 项目自定义指令实现防抖
自定义v-debounce指令实现click事件防抖该指令绑定的方法暂不支持传递参数,如需要传参数可以参考另一篇博客,防抖组件的实现工具uitls文件夹创建debounce.js文件代码如下 i ...
VUE使用自定义指令对普通 DOM 元素进行底层操作
使用vue的自定义指令来整合某个重复使用的底层操作举个聚焦输入框的例子,如下: 当页面加载时,该元素将获得焦点 (注意:autofocus 在移动版 Safari 上不工作).事实上,只要你在打开这 ...
js 只允许输入大写字母
1.输入框只允许输入大写字母 var str = '峰峰 FF 123'; str.replace(/[^\[A-Z]/g,'') //'FF'
“药药切克闹”系列－基于STM32触摸屏的超级无敌智能电子密码锁（仿手机键盘26键设计，密码支持英文大写+英文小写+数字）
项目名称:"药药切克闹"系列-基于STM32触摸屏的超级无敌智能电子密码锁(密码支持英文大写+英文小写+数字) CSDN:YANG-03 ...
php从一个字符串中过滤掉英文,php过滤只保留中文，英文以及数字的方法
今天在开发一个关于QQ号登录的功能时,发现获取的QQ号昵称中有的带有一些特殊的字符.而这些带有特殊字符的昵称在其它功能中调用时会发生一些判断错误,所以就写了一个过滤的正规表达式,用来过滤昵称中的特殊字 ...

VUE通过自定义指令，只允许输入大写英文以及数字

html

js

VUE通过自定义指令，只允许输入大写英文以及数字相关推荐

最新文章

热门文章