在 HTML 文本输入中监听 selectionStart 和 selectionEnd 的正确方法，以处理鼠标向左拖动，带有敲除

Question

我正在听

selectionStart

和

selectionEnd

与敲除，当用户用鼠标单击并拖动 right 以创建选择时，它工作正常。但是，如果用户单击文本并向leftwards 拖动鼠标以创建选择，则不会返回正确的值：selectionEnd 和 selectionStart 在这种情况下是same 值，例如6 和 6 当我用鼠标从右向左移动选择一个六个字母的单词时。

这是我的绑定：

<input type="text" data-bind="textInput: Model.searchWord, event:{keyup: Model.saveSelection, mouseup: Model.saveSelection, mousedown: Model.saveSelection, click: Model.saveSelection}" />

附言我也试过不听点击事件。

这是代码：

    self.selectionStart = ko.observable();
    self.selectionEnd = ko.observable();

self.saveSelection = function (v1, keyEvent) {
        
        self.selectionStart(keyEvent.target.selectionStart);
        if (keyEvent.target.selectionEnd) {
            self.selectionEnd(keyEvent.target.selectionEnd);
        } else {
            self.selectionEnd(0);
        }    

    if (keyEvent.type = "mousedown") return true;
    if (keyEvent.type = "mouseup") return true;            
      
    }



      

Answer 1

在我的例子中，我正在使用一个自制的虚拟键盘，它将用户键盘上找不到的字符注入支持 Input 元素的可观察对象中。有时它会是一个附加或插入的字符，有时它会替换一个选择。因此，选择的开始值和结束值也必须在

blur

事件中捕获。

Answer 2

您的 JavaScript 示例中存在错误：

 if (keyEvent.type = "mousedown") return true;
 if (keyEvent.type = "mouseup") return true; 

您正在分配给 keyEvent.type 而不是进行比较。尝试：

 if (keyEvent.type === "mousedown") return true;
 if (keyEvent.type === "mouseup") return true; 

我有一个可以正确显示选择的工作示例：https://playcode.io/1351651