这个脚本有几个可以清理的小UX故障，但它确实完成了我在chrome中测试时概述的基本任务：

<input id=myinp />

<script> // bind handlers to input:
   myinp.onkeypress=myinp.onblur=myinp.onpaste= function vld(e){
     var inp=e.target;
     // count bytes used in text:
     if( encodeURIComponent(inp.value).replace(/%[A-F\d]{2,6}/g, 'U').length > 4){
        // if too many bytes, try to reject:
        e.preventDefault;
        inp.value=inp.val||inp.value;
        return false;
     }
     // backup last known good value:
    inp.val=inp.value;
   }

</script>

在我自己的研究中，我认为这真的很好：

function limit_input(n) { // n = number of bytes
  return function(e) {
    const is_clipboard = e instanceof ClipboardEvent;
    if(is_clipboard && e.type != "paste") {
      return;
    }
    let new_val = e.target.value;
    if(is_clipboard) {
      new_val += e.clipboardData.getData("text");
    } else {
      new_val += e.key;
    }
    if(new TextEncoder().encode(new_val).byteLength -
       e.target.selectionEnd + e.target.selectionStart > n) {
      if(e.target.value == "" && is_clipboard) {
        const old = e.target.placeholder;
        e.target.placeholder = "Text too long to paste!";
        setTimeout(function() {
          e.target.placeholder = old;
        }, 1000);
      }
      e.preventDefault();
    }
  };
}

let el = document.getElementById("your_input");

el.onkeypress = el.onpaste = limit_input(4);

我从dandavis的答案开始，并不断改进以适应所有情况。我仍然不认为这是完美的，它仍然使用弃用的onkeypress处理程序，但没有什么比这更好的了。
您可以删除更改placeholder的代码部分，说明文本太长无法粘贴（删除整个if，仅保留e.preventDefault()）。这只是我自己添加的东西，用来通知用户为什么在尝试粘贴内容后输入仍然是空的。这样他们就不会因为我写了错误的代码而责备我，我也不必回答一大堆的抱怨。

创建一个返回字符串字节长度的函数，然后根据您的要求验证输入。
下面是一个返回字符串字节长度的示例：

function getStringByteLength(str) {
  str = typeof(str) === 'string' ? str : '';
  const byteSize = new Blob([str]).size;
  return byteSize;
}

Here's a fiddle，它有一个调用上面的函数来验证两个不同的文本输入的工作示例。

如果估计还不够好，我会过滤所有非单字节字符并计数。