function placeCaretAtEnd(el) {
        let range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        let sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
}

[...document.querySelectorAll('td')]
    .forEach(td => 
        td.addEventListener('focus', (e)=>{ placeCaretAtEnd(e.target) })
    )

modadvisor free commented 2 years ago

will it supports for all browser ? Thanks

<p>will it supports for all browser ? Thanks</p>

Please insert min. 15 characters.

Publish

---

modadvisor free commented 2 years ago

also is there possibility that when i move through tab it can select whole values in the td ?

<p>also is there possibility that when i move through tab it can select whole values in the td ? </p>

Please insert min. 15 characters.

Publish

---

Marcin Luczak staff commented 2 years ago

For cross-browser support please see this SO link on which I based my solution https://stackoverflow.com/questions/4233265/contenteditable-set-caret-at-the-end-of-the-text-cross-browser.

For selecting whole values you can check this link https://stackoverflow.com/questions/3805852/select-all-text-in-contenteditable-div-when-it-focus-click

<p>For cross-browser support please see this SO link on which I based my solution <a href="https://stackoverflow.com/questions/4233265/contenteditable-set-caret-at-the-end-of-the-text-cross-browser" target="_blank" rel="nofollow">https://stackoverflow.com/questions/4233265/contenteditable-set-caret-at-the-end-of-the-text-cross-browser</a>. </p> <p>For selecting whole values you can check this link <a href="https://stackoverflow.com/questions/3805852/select-all-text-in-contenteditable-div-when-it-focus-click" target="_blank" rel="nofollow">https://stackoverflow.com/questions/3805852/select-all-text-in-contenteditable-div-when-it-focus-click</a></p>

Please insert min. 15 characters.

Publish

---