Proper way to listen for selectionStart and selectionEnd in HTML text inputs to handle leftward dragging of mouse, with knockout

Question

I am listening for selectionStart and selectionEnd with knockout and it's working fine when the user clicks with the mouse and drags rightward to create the selection. But if the user clicks in the text and drags the mouse leftwards to create the selection, the proper values are not being returned: selectionEnd and selectionStart are in that case the same value, e.g. 6 and 6 when I select a six-letter word moving right-to-left with the mouse.

Here's my binding:

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

P.S. I've also tried without listening for the click event.

and here's the code:

    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;            
      
    }

Tim · Accepted Answer · 2023-03-26 22:13:07Z

0

In my case I'm working with a home-grown virtual keyboard that injects characters not found on the user's keyboard into the observable backing the Input element. Sometimes it will be an appended or inserted character, and sometimes it will replace a selection. So the selection start and end values have to be captured in the blur event as well.

edited Mar 26, 2023 at 22:13

answered Mar 26, 2023 at 21:57

Tim

8,99031 gold badges111 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Martlark · Accepted Answer · 2023-03-27 00:59:03Z

0

There is an error in your JavaScript example:

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

You're assigning to keyEvent.type instead of doing a comparison. Try:

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

I have a working example that shows selection correctly at: https://playcode.io/1351651

answered Mar 27, 2023 at 0:59

Martlark

14.6k14 gold badges86 silver badges103 bronze badges

2 Comments

Tim Over a year ago

Ah, thanks for pointing that out. Typo crept in here on SO when I was editing the question, not in the original code.

Tim Over a year ago

I needed to get the selectionStart and selectionEnd for the input when I clicked on a virtual keyboard to add a character not available on the physical one; unless I saved those values in the blur event, it wasn't working properly at that juncture.

Collectives™ on Stack Overflow

Proper way to listen for selectionStart and selectionEnd in HTML text inputs to handle leftward dragging of mouse, with knockout

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related