模糊事件在按键时触发

Question

我需要在按下回车键和模糊事件时获取输入值。所以我创建了 2 个函数：

   <input @blur=${this._setNameByBlur} @keydown=${this._setNameByEnter}/>

处理模糊事件

  byBlur(e) {
    const text = e.currentTarget.value;
    e.preventDefault();
    this.dispatchEvent(new CustomEvent("save-entry", { detail: text, composed: true, bubbles: true}));
  }

处理 Enter 键按下

  byEnter(e) {
    const text = e.currentTarget.value;
    if (e.type === "keydown") {
      if (e.key === 'Enter' || e.keyCode === 13) {
        e.preventDefault();
        e.stopPropagation();
        this.dispatchEvent(new CustomEvent("save-entry", { detail: text, composed: true, bubbles: true}));
      }
  }
 }

问题是，当我按下“enter”键时，除了执行

byBlur

功能之外，还执行

byEnter

- 我认为这基本上是因为在按下 Enter 时，我实际上失去了焦点，所以这就是为什么。寻找解决该问题的钥匙

Answer 1

这就是我想到的

  _setNameByBlur(e) {
    const text = e.currentTarget.value.trim();
    if (e.sourceCapabilities !== null) {
      e.preventDefault();
      this.dispatchEvent(new CustomEvent("save-entry", { detail: text, composed: true, bubbles: true}));
    }
  }

当模糊事件在“enter”后触发时，按其“null”。

所以我刚刚添加了一个条件

Answer 2

在

blur()

打电话给

byEnter

怎么样？

byEnter(e) {
    if (e.type === "keydown") {
      if (e.key === 'Enter' || e.keyCode === 13) {
        e.preventDefault();
        e.stopPropagation();
        e.target.blur();
      }
  }
 }