0

iOS のサファリの入力でオートコレクトを無効にしようとしています。現在、purescript ハロゲンには「自動修正」プロパティがないため、作成し、それを使用するようにインデックス付き入力要素レコードを変更しました。

私の問題は、入力要素がレンダリングされるときに、新しいプロパティが実際には dom に追加されないことです。また、Chrome でレンダリングされたときに dom に適切に追加される「autocapitalize」プロパティを作成しましたが、Safari では追加されませんでした。そのため、プロパティを作成する方法が機能することはわかっています(ただし、どちらのプロパティもサファリで機能しない理由はわかりません)。 ）。purescript-jquery を使用して「自動修正」プロパティを追加でき、すべてがサファリで機能しますが、DOM でプロパティを取得するより自然な方法はありますか?

サファリ固有の「自動修正」プロパティへの参照は次のとおりです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 から継承された残念なことです。プロパティは基本的に、要素のインターフェイスの一部であり、必ずしも値が文字列型であるとは限らないため、特別です。

もう 1 つの原因は、autocorrectおよびautocapitalizeのプロパティが存在することですが、そのように名前が付けられていない可能性があります。属性名とは異なり、プロパティ名は大文字と小文字が区別されます。

forプロパティは、プロパティ名と属性名が異なる場合の例です。

于 2016-07-28T11:05:20.137 に答える