/(http|https):\/\/([\w.]+\/?)\S*/
后台管理项目input输入框不可以输入表情代码实现如下 <el-input @input="prodDetail.prodName = prodDetail.prodName.replace(reg, '')" v-model.trim="prodDetail.prodName" clearable ></el-input> data(){ return { reg: /[\uD83C|\uD83D|\uD83E][\uDC00-
在开发的功能交付测试的时候,测试提出来文本框不能输入表情的bug(这也算一个bug?哪位大神会进行这样的反人类操作啊),说归说,既然提出来了,那咱还得改不是,具体代码如下所示:
首先声明一个输入框:
<a-form-item label="" name="searchValue">
<a-input v-model:value.trim="formState.searchValue" autocomplete="off" placeholder="请输入姓名或工号" @ch
输入框禁止输入表情符号,在这里记录一下
<el-input v-model="inputValue" @input="inputVal('inputValue',$event)"></el-input>
methods中的方法
// 禁止input框输入表情
inputVal(type,e){
console.log(type,e,'--------')
let reg = /([0-9|*|#]\uFE0F\u20E3)|([
// 判断是否含有特殊符号
let reg1 = /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘’,。、]/im
// 判断是否含有emoji表情
let reg2 = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\.
vuejs 聊天 Vue聊天表情符号 (Vue Chat Emoji)
A simple chat emoji for vuejs.
vuejs的简单聊天表情符号。
安装 (Installation)
npm install vue-chat-emoji
用法 (Usage)
using inside component
使用内部组件
<template>
<di...
项目中测试提出问题,在Input输入框中输入表情后,后台会报错,于是想着在前端输入的时候禁止输入表情,或者点击win10输入法后面的表情时,禁止输入表情
在网上看到一些方法,参考地址,可以实现实现输入的时候不能输入表情,但是鼠标点击win10输入框后面的表情时,还是能输入的。
所以我对以上方法做了一点改造,实现了我想要的效果,如下图所示
最近的项目用到了表情包,咱们以前项目有用到emoji-vue。我就直接拿来用了。使用过程中真的一言难尽啊~~~~~
先附上一张这个插件在Vue中使用的列子。可以清楚的看到一个比较重要的方法onInput和myText属性。没错这就是我一言难尽的地方,使用这个demo会出现两个问题
这里有个在线测试地址emoji-vue在线测试
接下来咱们提提这个插件两处问题,先给一张自己测试的图。
1 我测试的时候,开始输入了文字,后面准备在文字后面添加表情,但是无论怎么搞,表情都会在前面添加
2 另一个问
Vue 是一款流行的前端框架,可以自定义指令来实现特定的功能。如果要校验输入为 2 位小数数字,可以自定义一个指令来实现。
首先,需要在 Vue 中注册一个自定义指令。指令分为全局指令和局部指令,在这里我们注册一个局部指令。
Vue.directive('decimal', {
bind: function(el, binding, vnode) {
// 逻辑代码
然后,在 bind 钩子中编写校验逻辑。校验逻辑可以使用正则表达式。可以使用 v-model 指令将输入框和指令绑定。
Vue.directive('decimal', {
bind: function(el, binding, vnode) {
el.addEventListener('input', function() {
let input = this.value;
if (input.indexOf('.') != -1) {
input = input.substring(0, input.indexOf('.') + 3);
let reg = /^\d+(\.\d{1,2})?$/;
if (reg.test(input)) {
vnode.componentInstance.$emit('input', input);
} else {
this.value = binding.value;
这段代码中,使用 addEventListener 给输入框添加 input 事件监听器。在监听器中对输入的值进行校验,如果输入的值不符合要求,则将输入框的值改为之前的值。
最后,将指令绑定到输入框上。
<input v-model="number" v-decimal />
这样,输入框就可以校验输入为2位小数数字了。