Back to Questions
579
views2
comments
Set focus on an Input
websharperwebsharper ui.next

How to move focus to a Doc.Input?

BTW, it would be great if Template TP exposed controls like

1
2

<input ... named="input1"/>

then it'd be accessable like Page.Doc.input1.

.

You can do something like this to focus a Doc.Input:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

open WebSharper
open WebSharper.JavaScript
open WebSharper.UI.Next
open WebSharper.UI.Next.Client

[<JavaScript>]
module Client =

    [<Inline "$el.focus()">]
    let focus (el : Dom.Element) = ()

    let Main =
        let rvInput = Var.Create ""
        let rvFocus = Var.Create ()

        Doc.Concat [
            Doc.Input [
                Attr.CustomVar rvFocus (fun el _ -> focus(el)) (fun _ -> None)
            ] rvInput
            Doc.Input [] rvInput
        ]
        |> Doc.RunById "main"

when you set the value of rvFocus with Var.Set rvFocus () the CustomVar handler will be called.

By on 11/30/2015 1:30 AM ()

Thanks! To prevent the element to be focused on page load, it's better to

1
2
3

let vFocus = Var.Create None

... Attr.CustomVar vFocus (fun el -> function Some() -> focus el | None -> ()) (fun _ -> None) ...
By on 12/2/2015 12:50 AM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper