MDB Vue editable table tab focus cursor position not working

Topic: MDB Vue editable table tab focus cursor position not working properly

modadvisor asked 3 years ago

Dear sir

i am using your editable component from below link. when user try to navigate through tab key using one cell to another cell cursor is focusing at the start of the values but it must needs to place cursor at the end of each values in the cell

https://mdbootstrap.com/docs/vue/tables/editable/

please help me to solve that issue. Thanks

Add comment

Marcin Luczak staff answered 3 years ago

0 0 Best answer

Hi,

This is not default browser behavior and this can't be done directly from the component's methods. To achieve that you will have to create a custom function and append it to the table cell event listener on focus, e.g:

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

Keep coding, Marcin

modadvisor commented 3 years ago

will it supports for all browser ? Thanks

modadvisor commented 3 years ago

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

Marcin Luczak staff commented 3 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

Add comment