粘贴时javascript onkeypress限制字符

Question

我在 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中超出限制。

我想实现文本区域显示的字符数不超过限制

更新:我还尝试通过 e.clipboardData.getData('text/plain').slice(0, max);

使用另一个线程中提到的解决方案

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

Answer 1

使用最大长度有什么问题？

我试过了，它对我有用:

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

在 View 模型中:

export class Test {
  max = 3;
}

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