Purescript Halogen Input Element und benutzerdefinierte Autokorrektur-Eigenschaft

Question

Ich versuche, Autokorrektur in Eingaben für Safari auf iOS zu deaktivieren. Es gibt derzeit keine "autocorrect" -Eigenschaft in Purescript halogen, also habe ich eine erstellt und den indizierten Eingabeelement-Datensatz modifiziert, um ihn zu verwenden.

Mein Problem ist, dass die neue Eigenschaft nicht tatsächlich zum Dom hinzugefügt wird, wenn das Eingabeelement gerendert wird. Ich habe auch eine "autocapitalize" -Eigenschaft erstellt, die ordnungsgemäß zu den Dom hinzugefügt wird, wenn in Chrom gerendert, aber nicht Safari, so weiß ich, dass die Art, wie ich Eigenschaften kann funktionieren (obwohl ich nicht sicher bin, warum keine Eigenschaft funktioniert in Safari). Ich kann die "autocorrect" -Eigenschaft mit purescript-jquery hinzufügen und alles funktioniert in Safari, aber gibt es einen natürlicheren Weg, die Eigenschaft in das DOM zu bekommen?

Hier ist der Verweis auf die Safari-spezifische "Autokorrektur" -Eigenschaft https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input.

Ich habe auch einen GitHub Repo mit dem Code https://github.com/sportanova/purescript-input-example/tree/master

Ich bin mit PURESCRIPT v0.8.5 und Halogen v0.8

module Main where 

import Prelude 
import Control.Monad.Eff (Eff) 
import Halogen 
import Halogen.Util (awaitBody, runHalogenAff) 
import Halogen.HTML.Properties.Indexed as PI 
import Halogen.HTML.Elements as E 
import Halogen.HTML.Indexed as HI 
import Data.Generic (class Generic, gCompare, gEq) 
import Control.Monad.Aff (Aff) 
import Halogen.HTML.Core (Prop, prop, propName, attrName) 
import Halogen.HTML.Elements.Indexed (Leaf) 
import Halogen.HTML.Properties.Indexed (IProp, I) 
import Unsafe.Coerce (unsafeCoerce) 
import Data.Maybe (Maybe(..)) 
import Control.Monad.Eff.JQuery as J 

inputx :: forall p i. Leaf (accept :: I, autocapitalize :: I, autocomplete :: I, autocorrect :: I, autofocus :: I, checked :: I, disabled :: I, form :: I, formaction :: I, formenctype :: I, formmethod :: I, formnovalidate :: I, formtarget :: I, height :: I, list :: I, max :: I, min :: I, multiple :: I, onAbort :: I, onChange :: I, onError :: I, onInput :: I, onInvalid :: I, onLoad :: I, onSearch :: I, onSelect :: I, pattern :: I, placeholder :: I, readonly :: I, required :: I, size :: I, src :: I, step :: I, inputType :: I, value :: I, width :: I) p i 
inputx = unsafeCoerce E.input 

refine :: forall a r i. (a -> Prop i) -> a -> IProp r i 
refine = unsafeCoerce 

onOffProp :: forall i. String -> Boolean -> Prop i 
onOffProp pName = prop (propName pName) (Just $ attrName pName) <<< (\b -> if b then "on" else "off") 

autoCapitalizeP :: forall i. Boolean -> Prop i 
autoCapitalizeP = onOffProp "autocapitalize" 

autocapitalize :: forall r i. Boolean -> IProp (autocapitalize :: I | r) i 
autocapitalize = refine autoCapitalizeP 

autoCorrectP :: forall i. Boolean -> Prop i 
autoCorrectP = onOffProp "autocorrect" 

autocorrect :: forall r i. Boolean -> IProp (autocorrect :: I | r) i 
autocorrect = refine autoCorrectP 


type State = { } 

data Query a = 
    Initialize a 
    | Finalize a 

ui :: forall eff. Component State Query (ExEff eff) 
ui = lifecycleComponent { 
    render, 
    eval, 
    initializer: Just (action Initialize), 
    finalizer: Just (action Finalize) 
} where 

    render :: State -> ComponentHTML Query 
    render st = HI.div_ 
    [ 
     HI.div_ [HI.text "autocorrect attribute not added"] 
    , inputx 
     [ 
      PI.name "example" 
     , PI.autocomplete false 
     , autocorrect false 
     , autocapitalize false 
     , PI.spellcheck false 
     , PI.inputType PI.InputText 
     ] 
    , HI.div_ [HI.text "autocorrect attribute added through jquery"] 
    , inputx 
     [ 
     PI.name "working-example" 
     , PI.id_ "working-example" 
     , PI.autocomplete false 
     , autocorrect false 
     , autocapitalize false 
     , PI.spellcheck false 
     , PI.inputType PI.InputText 
     ] 
    ] 

    eval :: Natural Query (ComponentDSL State Query (ExEff eff)) 
    eval (Initialize next) = do 
    inputEl <- fromEff $ J.select ("#working-example") 
    x <- fromEff $ J.setAttr "autocorrect" "off" inputEl 
    pure next 
    eval (Finalize next) = pure next 


data Slot = Slot 

derive instance slotGeneric :: Generic Slot 

instance eqSlot :: Eq Slot where 
    eq = gEq 

instance ordGeneric :: Ord Slot where 
    compare = gCompare 

type ExEff eff = Aff (EX eff) 
type EX eff = HalogenEffects (eff) 

main :: forall eff. Eff (EX eff) Unit 
main = runHalogenAff do 
    body <- awaitBody 
    runUI ui {} body 

Answer 1

Haben Sie diese mit dem Attr Konstruktor versucht zu definieren, anstatt prop ? Ich denke, da sie nicht Teil der Standard-DOM-API sind, müssen sie als einfache Attribute und nicht als Eigenschaften definiert werden.

Die Unterscheidung zwischen Attribut und Eigenschaft ist eine unglückliche Sache, die von der DOM-API geerbt wird - Eigenschaften sind im Grunde genommen besonders, da sie Teil der Schnittstelle des Elements sind und nicht unbedingt string-typed in ihren Werten sind. Die andere Ursache könnte sein, dass es Eigenschaften für autocorrect und autocapitalize gibt, aber sie werden nicht so benannt - Eigenschaftsnamen unterscheiden Groß- und Kleinschreibung, im Gegensatz zu Attributnamen.

The for property ist ein Beispiel für einen Fall, in dem sich die Eigenschaften- und Attributnamen unterscheiden.