10

Whenever I create another instance of the editor (in my case, through an onkeypress event), I lose focus on the editor I was typing on when the new editor is created. How can I prevent all editors from losing focus on any event?

jj008
  • 1,033
  • 3
  • 23
  • 48

2 Answers2

10

Quill has a method called focus() for this.

var quill = new Quill('#editor', {
  theme: 'snow'
});

// This will focus the instance of quill editor
quill.focus()
Ikhlak S.
  • 8,578
  • 10
  • 57
  • 77
  • If I update the following jsfiddle to include quill.focus() I don't get focus... const quill = new Quill("#quill-editor", { theme: 'snow' }) let text ="How do I focus on Quill editor?" quill.insertText(0, text); quill.focus() Fiddle: https://jsfiddle.net/8d1gh7rn/5/ Does it perhaps have to do with the modal? Any help appreciated! – 11teenth Jul 06 '19 at 03:53
  • 1
    @11teenth This might be because when opening the model bootstrap focuses the modal losing the focus that was on quill. Trigger `quill.focus()` after the animation is done. https://jsfiddle.net/qeyn1b42/ – Ikhlak S. Jul 07 '19 at 09:40
  • via using bootstrap modal events `$('#modal').on('show.bs.modal', function () { setTimeout(() => { quill.focus() }, 600) })` – Deano Feb 06 '20 at 03:16
6
setTimeout(() => { 
  quill.focus();
})

It will work

Karthika U
  • 61
  • 1
  • 2
  • 3
    Please explain why your solution works with an additional source supporting your claim. – xIsra Dec 28 '20 at 07:37
  • 2
    It tooks some time to render the view meanwhile we are calling the focus method.. So the editor isn't focused. – Karthika U Dec 29 '20 at 11:48