I have a hack. First I include the following JS code:
var oldval = "";
function validateTime(ev) {
var s = ev.target.value;
if (isValid(s))
oldval = s; // Save value and don't modify input
else {
ev.target.value = oldval; // Restore last valid input
ev.stopImmediatePropagation(); // Listeners (e.g. Elm) ignore bad
input
}
}
Then I added
attribute "oninput" "validateTime(event)"
to the input element. It's hardly elegant and I'd be glad to know of a
better way.
On Saturday, June 18, 2016 at 6:26:24 PM UTC-4, Dan P wrote:
>
> Hi all, Elm newbie here. I'm trying to emulate the HTML input maxlength
> <http://package.elm-lang.org/packages/elm-lang/html/1.0.0/Html-Attributes#maxlength>
> attribute
> when type="number", in order to input an hour of the day. Using vanilla JS
> I would do the following:
>
> *index.html*
>
> <html><body>
> <input id="el" type="number">
> </body></html>
>
> *main.js*
>
> oldvalue = ""
>
> // The value of the element is already set before this function gets
> called.
> document.getElementById("el").oninput = function (e) {
> if (e.target.value.length > 2)
> e.target.value = oldvalue;
> else
> oldvalue = e.target.value;
> }
>
>
> However when I write this in Elm using onInput, the user's invalid input
> is visible for a few milliseconds before being fixed. To me this seems like
> a vDOM issue, but I really don't know.
>
> *Main.elm*
>
> model = ""
>
>
> update (Input s) model = if (String.length s > 2) then model else s
>
>
> view model = [ input [ type "number", onInput Input, value model ] [] ]
>
>
> I've combed through all the documentation in the Html package, and found
> nothing that would address this. My idea would be to somehow embed ordinary
> HTML inside my application (the guide does the inverse
> <http://guide.elm-lang.org/interop/html.html> of this), but I don't know
> how to do that either : /
>
>
> Thanks for your help!
>
--
You received this message because you are subscribed to the Google Groups "Elm
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/d/optout.
