Vue中禁止输入表情符号指令

参考地址：vue el-input中禁止输入表情符号_笑到世界都狼狈的博客-CSDN博客_输入框禁止输入表情

你知道compositionstart和compositionend吗 - 掘金

const findEle = (parent, type) => { return parent.tagName.toLowerCase() === type ? parent : parent.querySelector(type)
}const emoji = {bind(el, binding, vnode, oldVnode) {const regex = /(\ud83c[\udc00-\udfff])|(\ud83d[\udc00-\udfff])|(\ud83e[\udc00-\udfff])|[\u2100-\u32ff]|[\u0030-\u007f][\u20d0-\u20ff]|[\u0080-\u00ff]/g;const obj = findEle(el, 'input') || findEle(el, 'textarea');const zclearNoNum = function(e) {if (e.target.composing) return;const match = regex.exec(obj.value); if (match) {/* for (let i=0;i<match.length;i++) {obj.value = obj.value.replace(match[i],"");}*/obj.value = obj.value.replace(regex, '');zclearNoNum(e);}// 触发v-model的更新obj.dispatchEvent(new Event('input'));}const zblur = function(e) {zclearNoNum(e);setTimeout(() => {const match = regex.exec(obj.value);if (match) {obj.value = obj.value.replace(regex, '');zclearNoNum(e);}// 触发v-model的更新obj.dispatchEvent(new Event('change'));}, 50)}obj.onkeyup = zclearNoNum;obj.onblur = zblur;function onCompositionStart(e) {e.target.composing = true}function onCompositionEnd(e) {// console.log('按回车将字输入', e.target.value)e.target.composing = falseobj.dispatchEvent(new Event('change'));setTimeout(() => {if (obj.value) {obj.value = obj.value.replace(regex, '');zclearNoNum(e);}// 触发v-model的更新obj.dispatchEvent(new Event('change'));}, 50)}obj.addEventListener('compositionstart', onCompositionStart)obj.addEventListener('compositionend', onCompositionEnd)},update(el, binding, vnode, oldVnode) {}
}
export default emoji

在main.js中全局注册指令

import emoji from './common/utils/emoji';Vue.directive('emoji', emoji)

使用场景

// 在input框添加v-emoji指令既可
<a-input:maxLength="50"v-emojiautocomplete="off"placeholder="请输入名称"v-model= "form.label" />

Vue中禁止输入表情符号指令相关推荐

android中禁止输入表情符号,Android EdText编辑框禁止输入表情符号(使用正则表达式)...
使用正则表达式 p s f s not_emoji = "[\ud83c\udc00-\ud83c\udfff]|[\ud83d\udc00-\ud83d\udfff]|[\u2600-\u ...
vue中通过自定义指令将汉字转化为首字母大写、首字母小写、大写、小写的拼音
使用情景: 在文本框中输入内容,例如姓名在页面中将姓名转化为姓名的拼音,包括大写拼音.小写拼音.首字母大写拼音.大写拼音缩写.小写拼音缩写新建一个 pinyin.js 文件这是一串又臭又长的un ...
vue中自定义全局指令报错
我主要从三个方面来检查 1.首先检查是否拼写错误,尽量粘贴,不要手写 2.区分好变量和字符串的差别 <p v-color="'red'">全局指令</p> ...
vue中如何自定义指令
目录一. 什么是自定义指令二. 如何自定义指令三.应用场景实现输入框防抖图片懒加载一键 Copy的功能拖拽下拉菜单相对时间转换一. 什么是自定义指令我们看到的v-开头的行内属性, ...
vue中如何自定义指令directive
一. 什么是自定义指令我们看到的v-开头的行内属性,都是指令,不同的指令可以完成或实现不同的功能,对普通 DOM元素进行底层操作,这时候就会用到自定义指令.除了核心功能默认内置的指令 (v-mode ...
vue中的v-text指令之Vue知识点归纳(二)
本文中将描述: v-text 的指令的基本使用 v-text 与差值表达式的区别 1 简述 v-text会将元素当成纯文本输出 <!DOCTYPE html> <html lang= ...
Vue中常见的指令及其含义？
v-text 只解析文本信息 v-html 可以解析超文本标签 v-if/v-else-if/v-else 与javaScript中的一样,用于判断DOM的显示与隐藏. v-show 通过控制元素的d ...
手把手教你在vue中使用自定义指令全局封装防抖节流函数
第一步在src下创建utils文件夹并创建common.js文件 //'@/utils/common.js' 文件function throttle(bindObj, fn, delay) {bind ...
【Vue】v-bind v-model指令的使用（实现计算器效果）
在Vue学习笔记(一)中,我们已经了解了Vue中的基本指令,比如 v-text,v-html,v-bind,v-on 等指令的使用,并且介绍了 MVVM 模式,那么怎么实现动态的在M和V之间数据传递呢 ...

Vue中禁止输入表情符号指令

Vue中禁止输入表情符号指令相关推荐

最新文章

热门文章