フォーム要素のスタイリングと落とし穴の回避

読者へのご挨拶、サイト上のフォームの定型化された要素は、現代デザインの現実にしっかりと根付いており、多くの場合、彼らは本当に素敵に見えます。

あなたの多くは既に選ばれたプラグインや他の良いプラグインを取得していますが、それらのいくつかは非常によく書かれています。 この記事では、次のプラグインについては説明しませんが、プラグインの機能を拡張する方法の1つに注目したいだけです。

私は、スタイリングフォームのプラグインを接続するとき、ネイティブスタイルのフォーム要素を引き続き使用し、スタイリングプラグインに依存しないようにする必要があることを支持しています。 プラグインのDOM要素の属性を変更するときに要素の動作の変更の正しい処理（実際にはnoneと言うことができます）、つまり無効の属性（ min、max、maxlength ）を変更する処理は、APIプラグイン、要素のレイアウトを常に考慮する必要がありましたそして、これは将来的にプラグインやレイアウトを変更したい場合には不便です。 オプションとして、事前に考えてすべてのラッパーを作成し、それらを内部apiとして使用します。 しかし、別の方法があります。





属性に関する問題を研究した結果 、 思わず思い浮かびます-「しかし、要素の属性の変化をキャッチし始める必要がありますか？」 iosは既に完全にサポートしています。 結果は次のコードです（ jsFiddle ）

var MO = (window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver); var observer = new MO(function(){ console.log("disabled changed") }); observer.observe(document.querySelector("id"), { attributes: true, attributeFilter: ["disabled"] });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

IEを克服することは既に良いことであり、ここではすべてが悪いです...最初に、 DOMAttrModifiedと非常に古いpropertychangeがあります 。

もちろん、それらも機能しますが、私たちの場合はそうではありません。zadizeyblenny要素のイベントはスローしません。 ここから興味深い画像が得られます：disabled属性を追加すると、イベントはパルチザンとして静かになり、削除中は静かにロールオーバーします。 イベントは不調和であり、すべてを切り落とすのは悪いので、私はそれを標準的な動作ではなくバグと呼びますが、私は何ができますか。 ただし、これにより、この問題（ jsFiddle ）の簡単な回避策を書くことができます

 var AttributeObserver = function(element, callback, attribute){ var MO = (window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver); if (MO) { var observer = new MO(callback); observer.observe(element, { attributes: true, attributeFilter: [attribute] }); } else { if (!AttributeObserver.__timer) { AttributeObserver.__observed = [] AttributeObserver.__timer = setInterval(function(){ for (var i = 0; i < AttributeObserver.__observed.length; i++) { var o = AttributeObserver.__observed[i]; if (o.element.hasAttribute(o.attribute) !== o.flag) { callback() } o.flag = o.element.hasAttribute(o.attribute) } }, 500) AttributeObserver.__observed.push({ element: element, attribute: attribute, flag: element.hasAttribute(attribute) }) } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

一部の人々のsetIntervalについてのinりを予想します。いいえ、これはハックではありません。setIntervalは言語の非常に実用的な構造です。通常、ページには10〜20個のコントロールがあり、100個のコントロールで属性をチェックしても問題ありません。

また、このメソッドは、カスタムコントロールの動作に影響を与える可能性があるmaxlength、min、maxおよびその他の属性の変更に対応する必要がある場合に適用できます。 範囲入力の同じ最小、最大属性は、ネイティブ範囲入力を使用し、サポートなしのブラウザーのフォールバックを行う場合、属性を観察するための同様のアプローチで見栄えがよく、これは多くの問題を解決できます-ネイティブ形式で入力を操作しますプラグインが変更を取得します。 ここで重要な問題があるため、このオプションを今すぐ検討したいと思います-無効な要素を操作していないため、ソリューションをアップグレードできることを意味します（ jsFiddle ）

 var AttributeObserver = function(element, callback, attribute){ var MO = (window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver); if (MO) { var observer = new MO(callback); observer.observe(element, { attributes: true, attributeFilter: [attribute] }); } else if (element.addEventListener) { element.addEventListener('DOMAttrModified', function(e){ if (e.attrName == attribute) { callback() } }, false); } else if ("onpropertychange" in document) { element.attachEvent ('onpropertychange', function(e){ if (e.attrName == attribute) { callback() } }); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

PSコードは既成のプラグインであると主張するのではなく、可能なアプローチの1つを示すだけです。