Purescript 卤素输入元件和自定义自动更正 属性
Purescript Halogen Input Element and Custom Autocorrect Property
我正在尝试在 iOS 上禁用 safari 输入的自动更正。目前在 purescript halogen 中没有 "autocorrect" 属性,所以我创建了一个,并修改了索引输入元素记录以使用它。
我的问题是,在呈现输入元素时,新的 属性 实际上并未添加到 dom。我还创建了一个 "autocapitalize" 属性,当在 chrome 中呈现时,它会正确添加到 dom,但不是 safari,所以我知道我创建属性的方式 可以 工作(尽管我不确定为什么 属性 都不能在 safari 中工作)。我可以用 purescript-jquery 添加 "autocorrect" 属性 并且一切都在 safari 中工作,但是有没有更自然的方法在 DOM 中获取 属性 ?
这是对特定于 safari 的引用 "autocorrect" 属性 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 和 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
您是否尝试过使用 Attr
构造函数而不是 prop
来定义它们?我认为因为它们不是标准的一部分 DOM API 它们将需要被定义为普通属性而不是属性。
attribute/property 区别是从 DOM API 继承的不幸的事情 - 属性是特殊的,基本上,因为它们是元素接口的一部分,不一定是字符串-输入它们的值。
另一个原因可能是 autocorrect
和 autocapitalize
有属性,但它们的命名方式不同 - 属性 名称区分大小写,这与属性名称不同。
The for
property 是 属性 和属性名称不同的示例。
我正在尝试在 iOS 上禁用 safari 输入的自动更正。目前在 purescript halogen 中没有 "autocorrect" 属性,所以我创建了一个,并修改了索引输入元素记录以使用它。
我的问题是,在呈现输入元素时,新的 属性 实际上并未添加到 dom。我还创建了一个 "autocapitalize" 属性,当在 chrome 中呈现时,它会正确添加到 dom,但不是 safari,所以我知道我创建属性的方式 可以 工作(尽管我不确定为什么 属性 都不能在 safari 中工作)。我可以用 purescript-jquery 添加 "autocorrect" 属性 并且一切都在 safari 中工作,但是有没有更自然的方法在 DOM 中获取 属性 ?
这是对特定于 safari 的引用 "autocorrect" 属性 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 和 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
您是否尝试过使用 Attr
构造函数而不是 prop
来定义它们?我认为因为它们不是标准的一部分 DOM API 它们将需要被定义为普通属性而不是属性。
attribute/property 区别是从 DOM API 继承的不幸的事情 - 属性是特殊的,基本上,因为它们是元素接口的一部分,不一定是字符串-输入它们的值。
另一个原因可能是 autocorrect
和 autocapitalize
有属性,但它们的命名方式不同 - 属性 名称区分大小写,这与属性名称不同。
The for
property 是 属性 和属性名称不同的示例。