javascript限制输入框输入中文时的字节长度, 且避免输入过程中的字符问题

概述

在日常使用过程中有一些特殊情况, 需要限制输入框的字节数, 注意是字节数而不是字符数;
对于字符数, 我们简单的用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 = 0
  var 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) break
    newStr += originStr[i]
  }
  return newStr
}

var isInputting = false
$('input').off()
    .on('compositionstart', function () { // 开始输入
      isInputting = true
    })
    .on('compositionend', function () {  // 结束输入, 并触发input
      isInputting = false
      $(this).trigger('input')
    })
    .on('input', function () {
      if (isInputting) return  // 输入过程中, 不做处理
      var value = $(this).val()
      $(this).val(set_max_char(value, 64))
    })

结语

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