时间戳

首页 > 解决方案 > 如何识别来自Event（）rxjs的按键

angular - 如何识别来自Event（）rxjs的按键

问题描述

我使用来自 rxjs 的 fromEvent() 来收听用于搜索列表的输入框。当用户按下该键时，我想跳过键“TAB”。如何修改下面的代码，使我们从按下的键中跳过 TAB 键？然后搜索按下的其他键。

const keyup6$ = fromEvent(searchBox6, 'keyup')
    keyup6$.pipe(
      map((i: any) => i.currentTarget.value),
      debounceTime(1000))
      .subscribe(x => {
        this.countryId = x;
        console.log(this.countryId);
        this.fetchCustomersCount();
        this.searchCustomer();
      });

标签： angular

解决方案

我假设您的意思是要阻止导航到 tab 键上的文本框。看来您只能在 keydown 事件上抓住 Tab 键按下。

该示例显示了将 keydown 和 keyup 事件合并到一个流中。keydown 将过滤 Tab 按键并阻止默认行为。请注意，这可能是一个可访问性问题。

过滤掉keydown后，它会收到Tab的keyup，我也过滤掉了keyup事件。

const searchBox6 = document.getElementById('searchBox6');
const keydown6$ = rxjs.fromEvent(searchBox6, 'keydown');
const keyup6$ = rxjs.fromEvent(searchBox6, 'keyup');
const {
  map,
  debounceTime,
  tap,
  filter,
  ignoreElements
} = rxjs.operators;

rxjs.merge(
    keydown6$.pipe(
      // Only take tab keys Can also use event.keyCode, which says it is deprecated, but your
      // code is using const, so I think you would be okay using KeyboardEvent.key...
      filter(event => event.key === 'Tab'),
      // Prevent the default event
      tap(event => event.preventDefault()),
      // Don't care about doing anything with keydown from here
      ignoreElements()
    ),
    keyup6$.pipe(
      // Tab keys are now emitting keyup because the keydown behavior was prevented
      filter(event => event.key !== 'Tab')
    )
  ).pipe(
    // Your code...
    rxjs.operators.map((i) => i.currentTarget.value),
    debounceTime(1000))
  .subscribe(x => {
    console.log(x);
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.6.0/rxjs.umd.js"></script>
<input id="searchBox6">

推荐阅读