0

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

我的问题是,在呈现输入元素时,新属性实际上并没有添加到 dom 中。我还创建了一个“自动大写”属性,该属性在 chrome 中呈现时被正确添加到 dom,但不是 safari,所以我知道我创建属性的方式可以工作(尽管我不确定为什么这两个属性都不能在 safari 中工作)。我可以使用 purescript-jquery 添加“自动更正”属性,并且在 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
4

1 回答 1

1

您是否尝试过使用Attr构造函数而不是定义这些prop?我认为由于它们不是标准 DOM API 的一部分,因此需要将它们定义为普通属性而不是属性。

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

autocorrect另一个原因可能是and有属性autocapitalize,但它们不是这样命名的 - 属性名称区分大小写,与属性名称不同。

for属性是属性和属性名称不同的示例。

于 2016-07-28T11:05:20.137 回答