Question

我有这种情况。一个组件在用户键入的位置保留一个输入。另一个组件根据用户类型获取数据，并基于逻辑显示物料清单。这是一个简化的示例：

<input type="text" #itemSearch (input)="inputChange(itemSearch.value)" (keydown)="onKeyDown($event)">

相对功能：

inputChange(value: string){
    this.commonService.setToolsToSearch(value);
}

onKeyDown(event: any){
   const code = event.keyCode;
   if(code == 38 || code == 40 || code == 37 || code == 39){
    //    event.stopPropagation();
   }
}

显示的数据在自定义列表中，我添加了以下代码以使用户与其交互：

@HostListener('document:keydown', ['$event'])
  handleKeyboardEvent(event: KeyboardEvent) {
      if(event.keyCode == 38){ // arrow up
          //stuff that moves up the selected item by -1
      } else if(event.keyCode == 40){ // arrow down
         // stuff that moves up the selected item by 1
      }
  }

因此，基本上，使用箭头键（上和下），用户可以在此列表中“导航”。

问题：按up和down需要执行此逻辑，但是必须停止输入框中发生火灾的事件。为什么？因为使用箭头键会将行光标向上移动到输入中，所以如果我执行以下逻辑：

输入“ hello”
使用三次向上箭头
输入“世界”

我输入的是“ heworldllo”。

我的问题是，如何正确停止此事件？

与上面的代码一样，我尝试使用event.stopPropagation();，但没有任何变化。使用event.preventDefault();确实可以满足我的需要，因为它可以停止箭头键将光标向上移动到输入框中，但也不允许用户使用箭头键导航到列表中。我认为以这种方式处理问题是一个focus问题，因为如果我单击列表，则可以使用箭头键浏览列表。因此，我尝试以编程方式集中关注列表，但没有任何变化。

有人知道如何修复thix吗？

EDIT 使用event.preventDefault();解决了|谢谢@ConnorsFan

简化的工作堆叠闪电战：https://stackblitz.com/edit/angular-rhkemy

适当地防止事件在html输入中发出

0 个答案: