I am coding an editor, I have a menu tool bar, I want to keep my selection and cursor position in the textarea when I click on the toolbar. I have read most of relevant posts however none applies.
const app = document.querySelector('button');
const editor = document.querySelector('textarea');
// method 1
/*
editor.addEventListener('blur', ()=>{
editor.focus();
});
*/
// method 2
/*
app.addEventListener('click', e=>{
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
})
*/<button>app</button>
<textarea></textarea>From your question, you want to bring focus to text area when user clicks the button, below code provided, please let me know if this solves your issue.
const app = document.querySelector('button');
const editor = document.querySelector('textarea');
// method 1
/*
editor.addEventListener('blur', ()=>{
editor.focus();
});
*/
// method 2
app.addEventListener('click', e=>{
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
editor.focus();
})<button>app</button>
<textarea></textarea>const app = document.querySelector('button');
const editor = document.querySelector('textarea');
// method 3
app.addEventListener('click', e=>{
setTimeout(()=>editor.focus());
})<button>app</button>
<textarea></textarea>strong text