js限制input输入的最大字节

已于 2022-11-14 19:57:27 修改
阅读量3k 收藏 6
点赞数 2
分类专栏： js/jq 文章标签： input 限制输入最大长度 限制最大长度为多少个字节 javaScript jQuery
于 2019-05-25 23:36:46 首次发布

项目中遇到的问题是要求输入的最大字节是10个，但是input自带的maxlength不能实现，正则表达式也不好实现，所以看到别人的一种写法，感觉很好用，所以记录下来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
function WidthCheck(str, maxLen){ 
    var w = 0; 
    var tempCount = 0; 
    //length 获取字数数，不区分汉子和英文 
    for (var i=0; i<str.value.length; i++) { 
        //charCodeAt()获取字符串中某一个字符的编码 
        var c = str.value.charCodeAt(i); 
        console.log(c);
        //单字节加1 
        if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) { 
            w++; 
        } else { 
            w+=2; 
        } 
        if (w > maxLen) { 
            str.value = str.value.substr(0,i); 
            break; 
            alert('超过');
         } 
    } 
} 
</script> 
<input type="text" id="nickname" class="nickname" value="" onkeyup="WidthCheck(this,10);"/>
</body>
</html>

笑到世界都狼狈
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js控制输入框最大长度
littleFatty的博客
08-11 9113
html5中input元素拥有属性maxLength可以控制最大长度，但是部分主流浏览器不兼容比如ie，而且不区分中英文。所以这里用js控制最大长度。 js代码 /** * 计算字符串长度 截取并返回指定长度的字符串 * @param obj 元素对象 * @param len 截取字节长度 中文2字节 英文1字节 */ function maxLengthDispose(obj, l
js限制字符长度
为天加朵云...
08-01 2307
 长度限制<!--function test() {if(document.a.b.value.length>50){alert("不能超过50个字符！");document.a.b.focus();return false;}}// -->
字符与字节有什么区别
系统看你学习很认真，随机送了一个月会员！
05-18 1580
①ASCII码中，一个英文字母（不分大小写）占一个字节的空间，一个中文汉字占两个字节的空间。一个二进制数字序列，在计算机中作为一个数字单元，一般为8位二进制数，换算为十进制。④UTF-16编码中，一个英文字母字符或一个汉字字符存储都需要2个字节（Unicode扩展区的一些汉字存储需要4个字节）。举例：英文句号“.”占1个字节的大小，中文句号“。②UTF-8编码中，一个英文字符等于一个字节，一个中文（含繁体）等于三个字节。③Unicode编码中，一个英文等于两个字节，一个中文（含繁体）等于两个字节。
input输入框的三种控制方式：限制长度，控制输入，正则校验
最新发布
tianxianghuiwei的博客
01-10 2800
以上内容是对input的功能总结希望对大家有所帮助。匹配满足数字，字母，空格通过，否则禁止。
js限制输入长度
u011313703的博客
12-29 1164
JS限制Textarea文本域字符个数 function textCounter(field, countfield, maxlimit) { // 函数，3个参数，表单名字，表单域元素名，限制字符； if (field.value.length > maxlimit) //如果元素区字符数大于最大字符数，按照最大字符数截断； field.value = field.valu
js限制输入框可输入字节数代码
01-21
代码如下：（本来基于原型封装了一下...限制输入字节数 #div1 {width:500px;margin:20px auto;} #div1 ul {list-style-type:decimal;line-height:25px;} 可输入5个字节： 可输入6个字节： 可输入7个字节： 可输入n
js实现input限制输入字符（字节）数多出的自动去掉
05-23
js实现input限制输入字符（字节）数多出的自己自动去掉
js限制文本框输入长度两种限制方式(长度、字节数)
12-12
实时显示可输入的字数（字节数） 2.两种限制方式（长度、字节数） 3.中文输入法下可正常使用，无BUG 4.同一页面可以使用多个，相互不干扰 limit.js 代码如下: function limit(){ var txtNote;//文本框 var txtLimit;...
JS验证控制输入中英文字节长度(input、textarea等)具体实例
01-21
检查表单是否符合规定的长度.最长允许n个字符(中文算2位)！ 代码如下: function fucCheckLength(strTemp) { var i,sum; sum=0; for(i=0;i<strTemp>=0) && (strTemp.charCodeAt(i)<=255)) { sum=sum+1;...
js限制字数
qq_41818857的博客
02-08 1098
function textLength(str){ let a = 0 let limit = 200 //不能超出200个中文字符 if(str){ for(let i =0;i<str.length;i++){ if(str[i].charCodeAt()>0 && str[i].charCodeAt()< limitLength){ a+=0.5 }else{ a+=1 } } if(a>2000){ c
JavaScript 获取 input 输入框内容的几种方法
热门推荐
sophia11116的博客
12-04 1万+
JavaScript 获取 input 输入框内容的几种方法
input最大长度限制问题
ShiYadong的专栏
08-30 6620
&lt;input type="text" maxlength="5" /&gt; //可以 &lt;input type="number" maxlength="5" /&gt; //没有效果 &lt;input type="number" oninput="if(value.length&gt;5) value=value.slic
input 限制长度
joker6295的博客
04-07 8598
1、限制input最大长度 <input type="text" maxlength="5" /> //可以 <input type="number" maxlength="5" /> //没有效果 <input type="number" οninput="if(value.length>5) value=value.slice(0,5)" /> //js控制，可以 ...
js控制表单输入的长度
齐枫的博客
04-15 2064
js控制表单 &lt;body&gt; &lt;p&gt;在文本框中尝试输入触发函数。&lt;/p&gt; &lt;input type="text" id="myInput" &gt; &lt;p id="demo"&gt;&lt;/p&gt; &lt;script&gt; var a = document.getEle
javaScript 对于字符串字符长度的控制
weixin_40046130的博客
12-17 3147
写页面时，会有需求用户名称不要超过一行，或者描述文字不超过两行的要求，但是如果简单的使用 单纯使用username.slice(0,10)进行文字的控制的时候，发现效果不是很理想，因为中文和英文的字符长度不一样，导致获取的长度是不同的，所以使用字符长度来控制字数比较好，话不多上，上方法： byteLength (val, len = 25) { let b = len; // 规定长度 let init = 0; let newVal = ''; // 获取字符..
JS限制文本框录入长度（支持字符限制）
11-05 8736
 功能/特点：1.实时显示可输入的字数（字节数）2.两种限制方式（长度、字节数）3.中文输入法下可正常使用，无BUG4.同一页面可以使用多个，相互不干扰limit.jsfunction limit(){ var txtNote;//文本框 var txtLimit;//提示字数的input var limitCount;//限制的字数 var isbyte;
JS 文本框 maxlength（中文字符长度） 解决方案
bearhoop IT之道
08-21 8896
从CSDN 上找的... 1，JS function limitLength(value, byteLength, title, attribute) {//限制输入框字数         var newvalue = value.replace(/[^\x00-\xff]/g, "**");         var length = newvalue.length;
JS实现计算字符串字节长度
贾世鑫的博客
01-23 7912
JS计算字符串字节长度 String.prototype.byteLength = function() { var count = 0; for(var i=0,l=this.length;i<l;i++) { count += this.charCodeAt(i) <= 128 ? 1 : 2; } return count; } 附 ： Byte、KB、B、M...
JS input 输入框限制字节长度为50个字节（25个汉字，50个英文字符）怎么写
06-03
你可以使用 JavaScript 的事件监听器来实现输入框限制字节长度的功能。具体做法如下： 1. 在 HTML 中，给输入框添加一个事件监听器，监听输入事件（oninput）： ``` <input type="text" oninput="checkLength(this)" /> ``` 2. 在 JavaScript 中，编写 checkLength 函数，该函数会在用户输入时被调用： ``` function checkLength(input) { // 获取输入框的值 var value = input.value; // 计算字节数 var byteLength = 0; for (var i = 0; i < value.length; i++) { var charCode = value.charCodeAt(i); if (charCode <= 127) { byteLength += 1; // 英文字符 } else { byteLength += 2; // 中文字符 } } // 如果字节数超过了限制，截断输入框的值 if (byteLength > 50) { input.value = truncate(value, 50); } } function truncate(str, len) { var byteLen = 0; for (var i = 0; i < str.length; i++) { var charCode = str.charCodeAt(i); if (charCode <= 127) { byteLen += 1; } else { byteLen += 2; } if (byteLen > len) { return str.substring(0, i); } } return str; } ``` 3. checkLength 函数中，先获取输入框的值，然后计算字节数。为了区分中文字符和英文字符，我们使用 charCodeAt 函数获取字符的 Unicode 编码，如果编码小于等于 127，就认为是英文字符，否则就认为是中文字符。英文字符算一个字节，中文字符算两个字节。 4. 如果字节数超过了限制，我们就使用 truncate 函数截断输入框的值。truncate 函数也是通过计算字节数来实现的。如果字节数超过了 len，就返回字符串的前 len 个字符。 这样，就可以实现输入框限制字节长度的功能了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值