Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

onfocus & onblur ?

See original GitHub issue


Is there a way to get onfocus & onblur ?


I would like to represent the whole Editor inside textarea-like box with our CI-styles for focused & idle states

Thank you

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

pac92commented, Jun 11, 2020

This worked for me:

    const editorElement = document.getElementById('editorjs') // your "holder" ID
    editorElement.addEventListener('focusin', () => {
        // your logic
    editorElement.addEventListener('focusout', () => {
        // your logic
webdebcommented, Jun 11, 2020

For those who is using it with react:

  useEffect(() => {
    if (!editorInstance) return

    const holderId = editorInstance.configuration.holder
    const editorElement = document.getElementById(holderId)
    const onFocusIn = () => setFocused(true)
    const onFocusOut = () => setFocused(false)
    editorElement.addEventListener("focusin", onFocusIn)
    editorElement.addEventListener("focusout", onFocusOut)

    return () => {
      editorElement.removeEventListener("focusin", onFocusIn)
      editorElement.removeEventListener("focusout", onFocusOut)
  }, [editorInstance])
Read more comments on GitHub >

github_iconTop Results From Across the Web

onblur Event - W3Schools
The onblur event occurs when an element loses focus. The onblur event is often used on input fields. The onblur event is often...
Read more >
Element: blur event - Web APIs | MDN
The blur event fires when an element has lost focus. The event does not bubble, but the related focusout event that follows does...
Read more >
JavaScript OnFocus and onBlur - YouTube
Read more >
How do I use "onfocus" &. "onblur" for input type date in React ...
Have a state variable for the type, then use it in what you render: const Example = () => { const [type, setType]...
Read more >
Focusing: focus/blur - The Modern JavaScript Tutorial
The focus event is called on focusing, and blur – when the element loses the focus. ... input.onfocus = function() { if (this....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found