我正在尝试在iOS上的safari输入中禁用自动更正。 purescript卤素目前没有“自动更正”属性,所以我创建了一个,并修改了索引输入元素记录以使用它。
我的问题是,在呈现输入元素时,新属性实际上并未添加到dom中。我还创建了一个“autocapitalize”属性,在使用chrome渲染时正确添加到dom中,但不是safari,所以我知道我创建属性的方式可以工作(虽然我不是确定为什我可以使用purescript-jquery添加“autocorrect”属性,并且一切都在safari中运行,但是有更自然的方法来获取DOM中的属性吗?
以下是对特定于safari的“自动更正”属性https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input的引用。
我还使用代码https://github.com/sportanova/purescript-input-example/tree/master
创建了一个github仓库我正在使用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
答案 0 :(得分:1)
您是否尝试使用Attr
构造函数而不是prop
来定义这些内容?我认为,由于它们不属于标准DOM API,因此需要将它们定义为普通属性而不是属性。
属性/属性区别是从DOM API继承的一个不幸的事情 - 属性是特殊的,基本上,因为它们是元素接口的一部分,并且不一定在它们的值中字符串类型。
另一个原因可能是autocorrect
和autocapitalize
有属性,但它们没有这样命名 - 属性名称区分大小写,与属性名称不同。
The for
property是属性和属性名称不同的示例。