VUE实现限制输入框最多输入15个中文,或者30个英文
vue项目,输入框限制输入15个中文,或者30个英文
<input type="text" v-model="groupName" class="edit-input" ref="groupName"
@input="changeValue"
@change="editGroupNameSave(groupInfo.name)" >
changeValue () {
let leng = this.validateTextLength(this.groupName)
if (leng >= 15) {
this.$refs.groupName.maxLength = leng
} else {
this.$refs.groupName.maxLength = 30
}
},
validateTextLength (value) {
// 中文、中文标点、全角字符按1长度,英文、英文符号、数字按0.5长度计算
let cnReg = /([\u4e00-\u9fa5]|[\u3000-\u303F]|[\uFF00-\uFF60])/g
let mat = value.match(cnReg)
let length
if (mat) {
length = (mat.length + (value.length - mat.length) * 0.5)
return length
} else {
return value.length * 0.5
}
}
参考: https://www.jianshu.com/p/17edabad526e
VUE实现限制输入框最多输入15个中文,或者30个英文的更多相关文章
- 解决Vue中element-ui输入框无法输入问题
<el-input placeholder="请输入内容" v-model="input3" class="input-with-select& ...
- vue 如何将输入框的输入自动小写转大写(使用 v-model 时采取另一种方式)
前言:小写转大写,可以用过滤器实现,但当使用 v-model 时就不行了,这里有解决方案.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9289205.html ...
- vue 前端判断输入框不能输入0 空格。特殊符号。
oninput="value=value.replace(/[^\d.]/g,'').replace(/\.{2,}/g,'.').replace('.','$#$').replace(/\ ...
- html 输入框 只能输入数字 只能输入字母数字组合
JS判断只能是数字和小数点 1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'' ...
- input输入框限制输入正整数、小数、字母、文字
有的时候需要限制input的输入格式: 例如,输入大于0的正整数 <input onkeyup="if(this.value.length==1){this.value=this.va ...
- 从一次输入框无法输入的bug,谈如何限制输入框输入类型
bug的产生和修改 上周临近周末休息的时候,一个同事跑过来了,对我说:"阿伦啊,有一个页面出问题了,火狐浏览器所有的input都没法输入了."我一听,是不是你给加了什么属性,让in ...
- input输入框只能输入正整数、字母、小数、汉字
只需将需要的代码加入到input输入框中,即可使用! 1,文本框只能输入数字代码(小数点也不能输入) 代码如下: <input onkeyup="this.value=this.val ...
- input 输入框 只能输入数字、字母、汉字等
1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafte ...
- JS实现输入框只能输入数字
键盘下落事件实现输入框只能输入数字: <script type="text/javascript"> // 实现输入框只能输入数字 function ValidateN ...
随机推荐
- CTF—攻防练习之FTP服务后门
主机:192.168.32.152 靶机:192.168.32.156 首先查看靶机开放的端口: nmap 192.168.32.156 nmap -T4 -A -v 192.168.32.156 ...
- 小型自动化运维工具pssh和传输工具rsync
一.简单介绍 1.pssh全称是parallel-ssh,基于Python编写的并发在多台服务器上批量执行命令的工具.包括pssh,pscp,prsync,pnuke和pslurp.该项目包括pssh ...
- 【Ruby on Rails 学习六】Ruby 类 的入门
1.什么是类 2.类与实例的区别 3.自定义简单的类 生活中的垃圾分类,是集合上的概念 比如数学上的 1 a 2 b c 4 5分类为数字1 2 4 5 ,字母 a b c ir ...
- python 三元运算、列表推倒式、字典推倒式、生成器生成式
1.三元运算 name=input('姓名>>: ') res='SB' if name == 'alex' else 'NB' print(res) 2.列表推倒式 #1.示例 egg_ ...
- Excel使用技巧大全(超全)
目录 Excel 使用技巧集锦 --163 种技巧 一. 基本方法 1. 快速选中全部工作表 2. 快速启动 Excel 3. 快速删除选定区域数据 4. 给单元格重新命名 5. 在 Excel 中选 ...
- CF 1136B Nastya Is Playing Computer Games
题目链接:codeforces.com/problemset/problem/1136/B 题目分析 首先,读完题目,看了是个B题,嗯嗯...... 果断找规律,然后交了一波,居然过了!!! 代码区 ...
- VS Code Python 全新发布!Jupyter Notebook 原生支持终于来了!
VS Code Python 全新发布!Jupyter Notebook 原生支持终于来了! 北京时间 2019 年 10 月 9 日,微软发布了全新的 VS Code Python 插件,带来了众多 ...
- 17.AutoMapper 之配置(Configuration)
https://www.jianshu.com/p/031ff68797dd 配置(Configuration) 通过构造函数创建并初始化MapperConfiguration实例: config = ...
- npm学习(四)之如何安装全局包、更新全局安装的包、卸载全局安装的包
如何安装全局包 有两种方式用来安装 npm 包:本地安装和全局安装.选用哪种方式来安装,取决于你如何使用这个包. 如果你想将其作为一个命令行工具,那么你应该将其安装到全局.这种安装方式后可以让你在任何 ...
- 移除数组中指定键(Yii2)
/** * 移除数组中指定key * @param $data * @param $key * @return array */ public static function removeKey($d ...