粘贴时javascript onkeypress限制字符答案

【问题标题】：javascript onkeypress limit characters when pasting粘贴时javascript onkeypress限制字符
【发布时间】：2019-09-30 11:06:10
【问题描述】：

我在 Aurelia 中有一个带有 keydown.trigger 的文本区域：

<textarea name="description" keydown.trigger="handleKeypress($event, $event.target.value)" 
value.bind="desc" ></textarea>

在 .js 文件中，我有以下代码：

handleKeypress(event,newValue) { 
  let max = 3413;
  let valueSize = new Blob([newValue]).size; 
  if (event.charCode >= 48 && event.charCode <= 57 || event.key === "Backspace") {
    return true;
  }
  else {
    event.onpaste = function(e){
        e.clipboardData.getData('text/plain').slice(0, max);
};
    if (valueSize>= max) {return false;} 
  }
  return true;
}

所以这不应该在 textarea 中允许超过 3413 个字节的字符，因为在 DB 中我有字节限制，所以我不能在这里使用简单的 maxlength。

此代码工作正常，它不允许输入更多字符。它也不允许使用 CTRL+V 粘贴文本，但前提是达到限制。

问题是，当尚未达到限制并且有人通过 CTRL+V 或鼠标右键单击粘贴长文本时 - 粘贴。然后内容被粘贴，在textarea中超出了限制。

我想实现 textarea 显示的字符数不超过限制

更新：我还尝试通过e.clipboardData.getData('text/plain').slice(0, max); 使用另一个线程中提到的解决方案

但这对我来说没有任何作用。

【问题讨论】：

javascript prevent copy/pasting beyond character limit in textarea的可能重复
为什么不只使用return valueSize<max;，因为您在所有其他情况下都返回true
你的意思是代替 last return true put return valueSize
@NamigIsmayilov 不是真正的重复项，因为上述解决方案在 Chrome 中不起作用，并且使用了 maxlength，我不能在这里使用。
你能解释一下为什么只在按键时才需要处理粘贴事件的逻辑吗？他们不能分开吗？

标签： javascript html textarea aurelia maxlength

【解决方案1】：

使用 maxlength 有什么问题？

我试过了，它对我有用：

<template>
     <textarea name="description" maxlength.bind="max" value.bind="desc"></textarea>
</template>

在视图模型中：

export class Test {
  max = 3;
}

我在codeandbox 中对此进行了测试并且工作正常。见https://codesandbox.io/embed/4zy4k5r3k7

【讨论】：

好吧，我不认为我可以绑定最大长度，所以谢谢你。但问题是，我没有 maxlength 值，因为我只知道 DB 可以接受的最大字节数。所以我不能只将 maxlength 定义为一个固定数字，因为它可能会根据 2 字节字符等而有所不同。 Maxlength 必须以字符为单位，而不是字节
我明白了。我最好的方法是将字符串的最大大小设置为 DB 字节除以 2。希望这会有所帮助。
是的，我想我会走这条路，所以在这种情况下，我可以按照你的建议使用 maxlength 和 DB 字节的一半大小（我不希望用户会使用所有字符 2- bytes) 所以应该够远了。