Detect the input range when typing ontop of selection?

Question

So I have a textarea in my html called code. Here is my sample:

document.getElementById("code").addEventListener("input", function(ev) {
  console.log(this.selectionStart),
  console.log(this.selectionEnd),
  console.log(ev.data)
})

<textarea id="code"></textarea>

When I've selected the whole text like this:

And I type a - I get:

1
1
a

Instead of like:

1
9
a

I believe this is because it's first deleting the selected text and after that sending the input event on a blank textbox - any ideas how to get around this?

I'm trying to detect changes into the input so I can submit them to my server since I'm trying to implement live code sharing capability.

This sounds like [XY problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem). What do you actually need to achieve? — PM 77-1, Jan 21 '20 at 21:51
@PM77-1 I'm trying to detect changes into the input so I can submit them to my server since I'm trying to implement live code sharing capability. — AnArrayOfFunctions, Jan 21 '20 at 21:52
Yes! when input event gets called the selected text was already deleted. If you want to know the previous `selectionStart` and `selectionEnd` you must save them in another variable outside the eventListener, so next time you could have previous selection boundaries. — Cristian Torres, Jan 21 '20 at 21:54
@CristianTorres But how do I distinguish of when it's actually the selected text being replaced or the user is genuinely typing a single character. — AnArrayOfFunctions, Jan 21 '20 at 21:55
Handle the `select` event and set a variable to the value of the textarea. When the `input` event occurs, and value is different, you know it was a replacement. — Heretic Monkey, Jan 21 '20 at 21:57
@HereticMonkey What about if I just want to type a character without selecting anything first. — AnArrayOfFunctions, Jan 21 '20 at 22:01
The event is always going to fire after the change is made. It won't fire if you just select the text. — GetSet, Jan 21 '20 at 22:01
...Then you wouldn't have the problem outlined in the question? — Heretic Monkey, Jan 21 '20 at 22:02
@HereticMonkey Yeah but I want to both allow normal typing without selection and also selection typing. You know what - I guess it would be best if you just post your solution as an answer. — AnArrayOfFunctions, Jan 21 '20 at 22:03
So, store the value of the textarea in the `input` event too. — Heretic Monkey, Jan 21 '20 at 22:05

score 1 · Answer 1 · answered Jan 21 '20 at 22:24

1

You could implement something like:

var oldSelection = {start: 0, end: 0};

with(document.getElementById("code")) {
  addEventListener('mouseup', function(ev) {
    oldSelection.start = this.selectionStart; 
    oldSelection.end = this.selectionEnd;
    console.log(oldSelection);
  })
  addEventListener("input", function(ev) {
    console.log(oldSelection); console.log(ev.data);
  })
}

<textarea id="code"></textarea>

This way when input event occurs you know which range was selected before.

Footnote: you should implement it in a plugin's way so you can attach this behaviour to more than one input.

answered Jan 21 '20 at 22:24

Cristian Torres

256
3
12

I've found a bug - if you continuously type a single character the start and end position will stay the same. – AnArrayOfFunctions Jan 21 '20 at 22:33
Yes, until you make a selection again with the mouse. It's not perfect but it gives you an idea, right? – Cristian Torres Jan 21 '20 at 22:37
It does I used `select` event to make a working solution on my own. – AnArrayOfFunctions Jan 21 '20 at 23:27

Detect the input range when typing ontop of selection?

1 Answers1