This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Nick Mangos
Posted Jul 19 - Read on Facebook

Is there a way to set focus on an element that has content editable set to true? Focus() works on a input element, but not the below example.

background.html = "<div contentEditable=true> #{text} </div>"

6 Comments

George Kedenburg III

Not at my computer right now so I can't tell you the exact solution but I did this in one of my framer + parse guides: https://medium.com/@gk3/give-your-framer-prototypes-a-better-memory-212b26e0f934

George Kedenburg III

Download the prototype and take a look in there

Nick Mangos

I'm actually using Parse with this prototype. I used your first guide to help set it up. I didn't realise you had posted a second. Thanks, I'll take a look.

Joshua Tucker

Have you grabbed a reference to the div content?

background.html = "<div id='div' contentEditable='true>#{text}</div>
divElement = background.querySelector("#div")

Now that you have the div element referenced (divElement), you can perform things on it. What I am unclear is whether you can use focus() on divs. I will try to find a prototype I worked on where I had to use something along the lines of focus() as well because I feel like I stumbled on this very same issue.

http://stackoverflow.com/questions/3656467/is-it-possible-to-focus-on-a-div-using-javascript-focus-function

Nick Mangos

Here is a working example for anyone having the same problem...

text = "What do we say to the god of death?"

background._element.innerHTML = "#{text}"
background.style = {
"text-align": "center",
"padding": "200px",
"line-height": "60px",
"font-size": "40px"
}
background.ignoreEvents = false
background._element.setAttribute('contentEditable', 'true')
background._element.focus()

Nick Mangos

Although my next challenge is getting it to select all on focus.

Read the entire post on Facebook