javascript - 如果所选文本在输入范围内，则触发输入事件的功能

Question

我已经 built a page 您可以在其中通过在输入框中键入内容来过滤结果。

基 native 制是:

• 开始输入，触发输入事件，没有匹配文本的元素开始隐藏
• 如果输入变空(或者如果您单击重置按钮)，所有元素将再次显示

不过，在突出显示文本时，我注意到了一个问题。假设我在输入中输入“apple”。然后我突出显示它，并输入“橙色”。

如果页面上存在包含“orange”的元素，但由于我过滤了“apple”，它已被隐藏，它不会显示。我收集到这是因为输入永远不会真正清空；相反，在继续使用“r-a-n-g-e”之前，我只是将“apple”替换为 orange 中的“o”。这意味着我得到了包含“orange”的“apple”结果子集，就好像我输入了“apple orange”一样。

我真正想做的是在隐藏不匹配的元素之前清除“orange”中“o”的按键输入，这样我就可以有效地在整个页面中搜索“orange”。

到目前为止我尝试了什么

1:在 select 事件上将输入值设置为 '':

$('.myinput').on('select', function(){
  $(this).val('');
});

这不起作用，因为它只是删除了我突出显示的文本，这是意外的。我只想在突出显示后重置按键上的输入。

2:在我的输入事件中包含一个 if 语句，检查输入中是否有选择:

$('.myinput').on('input', function(){
  var highlightedText = window.getSelection();

  if($(highlightedText).parent('.myinput')) {
    //reset my input
  }
});

这不起作用，因为它似乎在每次按键时都会触发，无论是否有任何实际选择。 (用户输入是否始终被视为选中？)

3:给input元素添加一个select事件监听器，如果有选择则设置一个变量为true。然后，在我的输入事件中，检查按键时变量是否为真。

$(function(){
  var highlightedText = false;

  $('.myinput').on('input', function(){
    if(highlightedText = true) {
      //reset my input
    }

    //do stuff

    highlightedText = false;
  });

  $('.myinput').on('select', function(){
    highlightedText = true;
  });
});

我真的认为这个会起作用，因为选择功能中的基本控制台日志只会在我想要的时候触发——当输入中的文本被突出显示时，但不会在其他文本被突出显示时，而不是当文本被突出显示时进入输入。但是，遗憾的是，当我将其更改为可变切换时，它似乎再次在每次按键时触发。

所以问题是:如何仅当输入中的文本被突出显示时才触发输入函数？

我找到了 this question这表明绑定(bind)到 mouseup 事件，但是当我只担心一个非常特殊的情况时，检查每一次点击似乎有点过分了。此外，该解决方案依赖于 window.getSelection()，到目前为止它对我不起作用。

我还找到了 another question这建议使用 window.selectionEnd 而不是 window.getSelection() 因为我正在处理文本输入。我尝试将其合并到上面的选项 2 中，但它似乎也会在每次按键时触发，而不是在突出显示时触发。

Answer 1

这个答案根本不是关于文本选择的。

但是当高亮文本被新输入替换时，仍然可以解决重新过滤文本的问题。

var input = document.getElementById('ok');
var character = document.getElementById('char');
var previousCount = 0;
var currentCount = 0;

input.addEventListener('input', function(){
    currentCount = this.value.length;
    if (currentCount <= previousCount){
        /*
            This will detect if you replace the highlighted text into new text.
            You can redo the filter here.
        */
        console.log('Highlighted text replaced with: ' + this.value);
    }
    previousCount = currentCount;
    char.innerHTML = this.value;
});

<input type="text" id="ok">

<div id="char"></div>