typescript 无法使用ngModel和指令修剪textBox的值

3bygqnnd  于 2023-01-14  发布在  TypeScript
关注(0)|答案(1)|浏览(143)

我试图修剪文本输入,但它复制了值

我不太了解Angular ,您能帮我找到解决方案吗StackBlitz Code

pb3s4cty

pb3s4cty1#

preventDefault()用法:
preventDefault()方法在事件可取消时取消该事件,这意味着属于该事件的默认操作将不会发生。
问题就在这里,您正在尝试停止粘贴行为。

if (!Number(event)) {
  e.preventDefault();
}

情景:
情况一:粘贴的值不是数字

  • 它将阻止粘贴行为。
    情况二:粘贴的值为数字
  • 从上面的代码来看,它不会阻止粘贴行为。
  • 接下来,将该值赋给<input>元素。
  • 因此,您将看到编号将被复制。

我相信你想达到的目标:
1.阻止默认粘贴行为。
1.只允许粘贴数字,当粘贴的值不是数字时,将退出此功能。

if (!Number(event)) return;

“paste”监听器的完整代码应该如下所示:

@HostListener('paste', ['$event']) onPaste(e: ClipboardEvent) {
  e.preventDefault();

  let event = e.clipboardData.getData('text');

  let reg = new RegExp(/\s/g);
  //allow paste only number values
  if (!Number(event)) return;

  if (reg.test(event)) {
    console.log('Dir "' + event + '"');

    this.eleRef.nativeElement.value = event.trim();
  }
}

Demo @ StackBlitz

相关问题