vue列表长度限定_vue双向绑定数据限制长度的方法

vue双向绑定数据限制长度的方法

vue双向绑定数据如何限制长度？具体方法请阅读文章

问题描述

vue中输入框v-modle 双向绑定的数据；在需要的业务场景下需要对其进行字数长度限制；

解决方案

可以使用以下方法：

方法一：

//方法一：输入框添加keypress方法；然后函数为：

maxLength(attr,length){

let keyCode = event.keyCode;

console.log("keyCode");

let len=0;

console.log(this[attr].length);

for (let codePoint of this[attr]) {

if (this[attr].charCodeAt(codePoint) > 128) {

len += 2;

} else {

len++;

}

}

if (len < length) {

event.returnValue = true;

} else {

event.returnValue = false;

}

},

//注意：事件必须为keypress；

//keydown 可以做限制，但是达到长度不可以删除；keyup不行；

方法二：

//方法二：输入框添加input方法；然后函数为：

inputMaxLength(attr,length){

this[attr] = api.getStrByteLen(this[attr], length);

},

方法对比：

方法一优点，循环少，性能高；缺点，中文输入法空格输入字符的时候不会触发；

方法二优点，兼容性好，适合各种场景；缺点，循环多，性能比较差；

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

时间： 2019-11-04

但是textarea没有这个属性. asp.net的服务端textbox这个属性也不起效,所以我们只有用js脚本来控制 好,废话不多说,先上代码 javascipt源码: 复制代码 代码如下: function textCounter(field, maxlimit, lines) {//参数说明:field是textarea对象,maxlimit是最大允许长度,lines是行数 var arr = field.value.split("\n");//首先我们要为验证行数,通过分行符&

一个普通的javascrip函数,只有一个入口参数 复制代码 代码如下: function test(info)

复制代码 代码如下: var fun = function(str){ var preg = new RegExp("[\u4e00-\u9fa5]+","gi"); var preg2 = new RegExp("[^\u4e00-\u9fa5]","gi"); var count = 0; for(var i=0;i

复制代码 代码如下:

• 首页

  将该效果整合成了一个函数,此函数接受3个参数: 第一个为textarea或其他text表单的ID: 第二个为显示输入内容的ID,可留空: 第三个为最多输入的字符,一个汉字为2个字符. 这只是一个基础效果,欢迎同学们进行优化和改进. 要获取代码请查看demo的源文件 限制表单输入长度 汉字为两个字符 function lengthLimit(elem, showElem, max){ var elem = document.getElementById(elem); var showElem =

  复制代码 代码如下:

  功能/特点: 1.实时显示可输入的字数(字节数) 2.两种限制方式(长度.字节数) 3.中文输入法下可正常使用,无BUG 4.同一页面可以使用多个,相互不干扰 limit.js 复制代码 代码如下: function limit(){ var txtNote;//文本框 var txtLimit;//提示字数的input var limitCount;//限制的字数 var isbyte;//是否使用字节长度限制(1汉字=2字符) var txtlength;//到达限制时,字符串的长度 var

  复制代码 代码如下: