2

バックグラウンド

WHATWG によるsomeForm.elementsと、HTMLFormElementsCollection.

複数の要素が同じ名前を共有している場合、 AHTMLFormElementsCollectionは a を返します。RadioNodeList

には、nodelist 内の最初にチェックされた無線リストの値を返すRadioNodeList特別なセマンティクスがあります。value

これにより、実装されている場合、次の回答が機能するようになります

私は単純に (WebIDL に従って) 適切に動作するホスト オブジェクトに基づくポリフィルを試みましたが、明らかにそうではありません。

質問

ブラウザが RadioNodeList または WebIDL に準拠するのを待つ間、このポリフィルの代替の効率的な実装は何ですか?

例 参照コード

<form name="myform">
    <input type="radio" name="foo" value="10" /> foo 
    <input type="radio" name="foo" value="30" /> bar 
</form>

var myform = document.forms.myform;

var radio = myform.elements.foo;
var price = radio.value;

素朴な試みの参照コード

(function () {
    var pd = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements"),
        getElements = pd.get;

    pd.get = get;

    Object.defineProperty(HTMLFormElement.prototype, "elements", pd);

    function get() {
        var elements = getElements.call(this);

        if (elements.length) {
            Object.defineProperty(elements, "value", {
                get: getRadioNodeListValue,
                set: setRadioNodeListValue,
                configurable: true
            });
        }

        return elements;
    }

    function getRadioNodeListValue() {
        for (var i = 0, len = this.length; i < len; i++) {
            var el = this[i];
            if (el.checked) {
                return el.value;   
            }
        }
    }

    function setRadioNodeListValue(value) {
        for (var i = 0, len = this.length; i < len; i++) {
            var el = this[i];
            if (el.checked) {
                el.value = value;
                return;   
            }
        }    
    }
}());
4

2 に答える 2

4

なんで？ES5 と WebIDL を要求すると、今日の Web で一般的に使用されているブラウザーでは失敗することがわかっています。あなたのコードには、ES5 ) Object.getOwnPropertyDescriptor、get/ set) の両方で新しい機能が必要です。

HTML5 ポリフィルは一般化を目的としており、一般的に実装に失敗します。それは有害な傾向です。

他のオブジェクトを変更しないでください。特にホスト オブジェクト。
HTML5 定義からの差異がある場合 (および存在する場合)、2 番目の機能テスト スクリプトvalueが無線のグループにプロパティがあるかどうかを検出しようとしたときに問題が発生し、標準サポートとはかけ離れています。 HTML5 の 2 段階アルゴリズム。

コードは、チェックボックスにも影響する場合にのみポリフィルelements.length > 0します (プロパティを持つ要素はラジオだけではないことに注意してcheckedください)。セッターは、最初にチェックしたラジオの値を変更します。値を設定して、その値を持つ、その名前の最初のチェックされていないラジオをチェックするべきではありませんか?

代わりに、必要なだけ一般的な関数を記述してください。

function getRadioValue(form, radioName) {
  // Delete comment, write code.
}

function setRadioValue(form, radioName, value) {
  // Delete comment, write code.
}
于 2012-09-12T17:14:54.507 に答える
4

valueゲッターをボルトで固定できる場合はNodeList、次のように動作するはずです

RadioNodeList ポリフィル

@@Esailja の功績

.value を NodeList プロトタイプに追加することもできます

于 2012-01-20T14:10:36.260 に答える