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

What is Framer? Join the Community
Return to index
Giles Perry
Posted Jun 10 - Read on Facebook

I’m using Jordan Robert Dobson's InputField module.

When the input field gets focus I want the text in the field to be highlighted. Any ideas how to do this?

I use inputLayer.input.focus() to give focus to my input field but how do I select and highlight the text value it contains?

I’ve tried inputLayer.input.setSelectionRange(0, inputLayer.value.length) but this doesn’t do anything.

8 Comments

Derek Nguyen

Jordan Robert Dobson himself can probably answer you better, I've just played around with his module a bit and this seems to work for me:

colorInput = new InputField
type: "text"
width: Screen.width - 36
height: 132
x: Align.center
y: Align.center
value: "Hello, Hey, Hi?"

colorInput.on Events.Focus, ->
@input.style.color = 'red'

Or by 'highlight' do you mean something other than just changing the input layer style?

Giles Perry

I mean make the text be selected so if you type the whole value is replaced rather than putting the insertion point at the end of the existing text value.

Derek Nguyen

Oh shoot, I just realized you mean to literally highlighting the whole thing. I've just put setSelectionRange() inside the event listener and it seems to work:

Derek Nguyen

Giles Perry Yeah I've just realized what you meant. I think what you did should work, maybe the problem is at a different part?

Jonas Treub

Webkit makes it impossible to select the text directly. But with a short delay it works. This should work:
input.on Events.Focus, -> Utils.delay 0, => @input.select()

Jonas Treub

Btw, we use the same trick for the input fields in Framer Design ;)

Giles Perry

I'll give that a try. Thanks.

Lukas Guschlbauer

Not sure if this works on mobile, but there's css "user-select:all", which does exactly this - at least on desktop!

https://css-tricks.com/almanac/properties/u/user-select/

Read the entire post on Facebook