Back to Questions
770
views4
comments
Using a Div with ContentEditable=true as a UI.Next input
websharperwebsharper ui.next

I'm trying to use a div with "contenteditable" set to true as an input. Is there a way I can (two-way bind the contents to a UI.Next Var?

.

How about something simple as:

1
2
3
4
5
6
7

let EditableDiv (v: Var<string>) =
    divAttr [
        attr.contenteditable "true"
        on.input (fun el _ ->
            v := el.TextContent
        )
    ] [Doc.TextView v.View]

Then you could do stuff like:

1
2
3
4
5
6
7
8

let v = Var.Create "Initial text"
div [
    EditableDiv v
    div [Doc.TextView (View.FromVar v)]
    buttonAttr [
        on.click (fun _ _ -> v := "Hello World")
    ] [text "Reset"]
]
By on 9/16/2015 5:03 AM ()

Adam: This nearly works but the control loses focus after every keypress (at least in Chrome) so you can only enter one character at a time and then you have to click to set focus again.

UPDATE
Whoop, actually this does work, the focus being lost was because my view was dependent on the variable I was editing. Thanks!

By on 9/16/2015 8:31 AM ()

I don't see what would cause losing the focus, are you on Windows? What version of Chrome?

By on 9/16/2015 8:39 AM ()

It looks like the necessary API to implement this is internal, so it is not currently possible. I am looking into the best way to expose such custom attribute API. Thanks for the suggestion!

By on 9/16/2015 3:07 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