Purescript卤素输入元素和自定义自动更正属性

Question

我试图禁用自动更正输入Safari浏览器在iOS上。目前在purescript卤素中没有“自动更正”属性，所以我创建了一个，并修改了索引输入元素记录以使用它。

我的问题是，当输入元素被渲染时，新的属性实际上并没有被添加到dom中。我还创建了一个“autocapitalize”属性，该属性在Chrome中呈现时正确添加到dom中，但不是safari，所以我知道我创建属性的方式可以工作（尽管我不确定这两个属性的工作原因在safari中）。我可以用purescript-jquery添加“autocorrect”属性，并且所有工作都在safari中运行，但是有没有更自然的方式来获取DOM中的属性？

以下是对safari特定的“自动更正”属性https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input的引用。

我还创建了一个GitHub库的代码https://github.com/sportanova/purescript-input-example/tree/master

我使用purescript v0.8.5和卤素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

您是否尝试过与Attr构造函数定义这些，而不是prop ？我认为，因为它们不是标准DOM API的一部分，所以它们需要定义为普通属性而不是属性。

属性/属性区别是从DOM API继承而来的一件不幸的事情 - 基本上属性是特殊的，因为它们是元素接口的一部分，不一定是字符串类型的值。

另一个原因可能是autocorrect和autocapitalize的属性，但它们不是以那种方式命名 - 与属性名称不同，属性名称区分大小写。

The for property是属性和属性名称不同的例子。