vue设置输入框输入长度_vue输入框限制字符串长度和输入内容实时验证的实现方式...

一、最简单，通过maxlength和onkeyup

?:;'\\\$\%\^\&\*\-\|\[\]\{\}\{\}]/g,'');" />

代码中正则是限制除中文外的所有键盘字符。

二、通过@input和@change

见代码：

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

}

三、通过watch

见代码：

Examples

new Vue({

el: '#app',

data: {

number: '100',

items: {

text:'',

watch:{ //watch()监听某个值(双向绑定)的变化，从而达到change事件监听的效果

items:{

handler:function(){

var _this = this;

var _sum = 100; //字体限制为100个

_this.$refs.count.setAttribute("maxlength",_sum);

_this.number= _sum- _this.$refs.count.value.length;

deep:true

}

})

vue设置输入框输入长度_vue输入框限制字符串长度和输入内容实时验证的实现方式...相关推荐

c语言中字母的长度是,c语言字符串长度怎么算
本文收集整理关于c语言字符串长度怎么算的相关议题,使用内容导航快速到达. 内容导航: Q1:c语言计算字符串的长度(用指针) 12345678910111213141516171819#include ...
python如何限制字符串长度_python如何修改字符串长度
python如何修改字符串长度发布时间:2020-09-23 17:16:18 来源:亿速云阅读:95 作者:Leah 今天就跟大家聊聊有关python如何修改字符串长度,可能很多人都不太了解,为 ...
php 变量长度,php 怎么计算字符串长度
这篇文章主要介绍了利用PHP函数计算中英文字符串长度的方法,实例对比了PHP函数实现方法与正则表达式的实现方法,具有一定的参考借鉴价值,需要的朋友可以参考下本文实例讲述了利用PHP函数计算中英文字符 ...
java判断字符串长度_java判断中文字符串长度的简单实例
/** * 获取字符串的长度,如果有中文,则每个中文字符计为2位 * @param value 指定的字符串 * @return 字符串的长度 */ public static int length( ...
c++语言获得字符长度,c++怎么获取字符串长度？
C++获取字符串长度 strlen()函数函数 strlen()是一个常规函数,他接受一个 C-风格字符串作为参数,并返回字符串包含的字符数. 参数必须是字符型指针(char*).当数组名作为参数传 ...
java判断字符长度_java判断中文字符串长度的简单实例
话不多说,上代码: /** * 获取字符串的长度,如果有中文,则每个中文字符计为2位 * @param value 指定的字符串 * @return 字符串的长度 */ public static i ...
vue设置页面滚动高度_vue 解决无法设置滚动位置的问题
问题描述在实现锚点定位的时候发现无法设置滚动条的位置. 在Vue中,使用 document.body.scrollTop=952 无法设置滚动条的高度. document.body.scrollTo ...
vue设置页面滚动高度_vue中获取滚动高度或指定滚动到某位置
1.点击某个标签,滚动到某个具体位置 switchHeight(num) { this.selectNum = num; if (num == 0) { document.getElementById ...
vue 不生效打包样式_Vue打包部署到Nginx时,css样式不生效的解决方式
今天在将使用Vue-cli编写的前端项目部署到Nginx的时候发生了一件很困扰的问题: Vue-cli项目在本地使用 npm run dev的时候,页面样式是可以正常加载出来的,但是我将Vue-cl ...

vue设置输入框输入长度_vue输入框限制字符串长度和输入内容实时验证的实现方式...

vue设置输入框输入长度_vue输入框限制字符串长度和输入内容实时验证的实现方式...相关推荐

最新文章

热门文章