https://stackoverflow.com/questions/75845300

by andrew rowe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
<input type="text" data-bind="textInput: Model.searchWord, 
    event:{keyup: Model.saveSelection, 
    mouseup: Model.saveSelection, 
    mousedown: Model.saveSelection, 
    click: Model.saveSelection}" />
<hr>
<p>selectionStart: <span data-bind="text: selectionStart"></span></p>
<p>selectionEnd: <span data-bind="text: selectionEnd"></span></p>
<div data-bind="text: selected"></div>

JavaScript

class ModelModel {
  constructor() {
    this.searchWord = ko.observable('search');
    this.selectionStart = ko.observable();
    this.selectionEnd = ko.observable();
    this.selected = ko.observable();
  }

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

    this.selected(this.searchWord().slice(this.selectionStart(), this.selectionEnd()))

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

    return false;
  }
}
const Model = new ModelModel();

window.addEventListener('load', () => {
  ko.applyBindings(Model);
});