Set cursor in input

Learn
1

I would like to set the cursor in an input field.
I tried to use autofocus in Html.Attributes, but that doesn’t do the job.
In javascript I would use .focus()
Is there a way to do this in Elm?

3 Likes
2

Yes, use this function:

https://package.elm-lang.org/packages/elm/browser/latest/Browser-Dom#focus

2 Likes
3

Super! Thanks a lot.

4

I too wanted this, “Autofocus of a input control on document load.” So I hunted around to see if I could set an HTML Attribute property. I found the way to do it in <https://package.elm-lang.org/packages/elm/html/latest/Html-Attributes>.

Look at the below concise snippet, an import and a helper function from HTML.Attributes module. If you still have trouble, I’ll put the full example online.

P.

– required import
import Html.Attributes exposing (property)

– Input box snippet start –
Input.text
[ centerX
, centerY
, width (px 500)
, spacing 16
– This line: Sets the HTML Attribute ‘autofocus’ to True
, htmlAttribute (property “autofocus” (Encode.bool True))
…
]
{ – }
– Input box snippet end –

5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.