概述

在日常使用过程中有一些特殊情况, 需要限制输入框的字节数, 注意是字节数而不是字符数;
对于字符数, 我们简单的用maxlength就可以解决
对于字节数, 如果是单字节字符当然也可以通过 maxlength 来限制, 但是对于多字节字符, 显然就无法正常限制了;
而对于常用编码 UTF-8来说, 字符的占用字节数范围为 [1:6], 因此需要进行相关计算

需要解决的问题

以中文为例:

1. 需要一个计算字符串的字节数的方法;
2. 需要一个事件监听, 监听输入变化, 比如 input;
3. 需要一个计算最大长度范围内, 输入字符的极限长度字符串的方法;
4. 需要保证在输入过程中, 如果是拼音输入法且通过input事件来监听变化的话, 那么在输入过程中输入的英文字符也会同时计数, 导致字符串错误 ;

具体实现

// 用于计算字符长度
function calc_char_length(param) {var totalLength = 0// UTF-8编码for (var i = 0; i < param.length; i++) {if (param.charCodeAt(i) <= parseInt('0x7F')) { totalLength += 1 }else if (param.charCodeAt(i) <= parseInt('0x7FF')) { totalLength += 2 }else if (param.charCodeAt(i) <= parseInt('0x7FFFF')) { totalLength += 3 }else if (param.charCodeAt(i) <= parseInt('0x1FFFF')) { totalLength += 4 }else if (param.charCodeAt(i) <= parseInt('0x3FFFFFF')) { totalLength += 5 }else { totalLength += 6 }}return totalLength
}// 用于获取最大长度范围内, 输入字符的极限长度字符串
function set_max_char(originStr, maxLen) {var totalLength = 0var newStr = ''// UTF-8编码for (var i = 0; i < originStr.length; i++) {if (originStr.charCodeAt(i) <= parseInt('0x7F')) { totalLength += 1 }else if (originStr.charCodeAt(i) <= parseInt('0x7FF')) { totalLength += 2 }else if (originStr.charCodeAt(i) <= parseInt('0x7FFFF')) { totalLength += 3 }else if (originStr.charCodeAt(i) <= parseInt('0x1FFFF')) { totalLength += 4 }else if (originStr.charCodeAt(i) <= parseInt('0x3FFFFFF')) { totalLength += 5 }else { totalLength += 6 }if (totalLength > maxLen) breaknewStr += originStr[i]}return newStr
}var isInputting = false
$('input').off().on('compositionstart', function () { // 开始输入isInputting = true}).on('compositionend', function () {  // 结束输入, 并触发inputisInputting = false$(this).trigger('input')}).on('input', function () {if (isInputting) return  // 输入过程中, 不做处理var value = $(this).val()$(this).val(set_max_char(value, 64))})

结语

以上方法通过测试, 实际可用; 但是实现较为复杂, 如果你能有更简单的方法, 还请告知一二~