Help-Selecting Text-Personal Prject

JavaScript
1

Hi campers!
Basically I have a table with a bunch of td that have the contenteditable attribute.
I already have a way of navigating trough them using the arrows… something like this:

evt => {
			let td = document.querySelector('td[contenteditable]'), 
				sel, 
				x = true, 
				y;
			if (td) {
				sel = document.querySelector('.selected') === null ? td : document.querySelector('.selected');
				y = sel;
				if (evt.key === 'ArrowLeft') {
					while (x) {
						x = y.previousElementSibling == null ? false : true
						y = y.previousElementSibling;
						if (y && y.contentEditable === 'true') {
							sel.classList.remove('selected');
							sel = y;
							sel.classList.add('selected');
							sel.focus();
							sel.click();
							x = false;
						}
					}
				}

But what I want is to get all the text inside the node to be selected, as if I had used my mouse (click and drag) .
the goal is to make it easy to overwrite text if need to.

So far i’ve tried right after sel.click(), to no success:

let selObj = window.getSelection(),
	range = document.createRange();
range.selectNodeContents(sel);
selObj.removeAllRanges();
selObj.addRange(range);

selObj.modify('extend', 'forward', 'paragraph');

let range = document.body.createTextRange();
range.moveToElementText(sel);
range.select();

Check out the whole project here:

2

So Should I keep fiddling with the Selection API??

i’ve also tried something like:

let x = new MouseEvent("dblclick")
sel.dispatchEvent(x)

but I can’t get the expected result

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.