Ankündigung

Einklappen
Keine Ankündigung bisher.

IE, replaceChild, name-Attribut identisch, Zugriff schlägt fehl

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige Weiter
  • #1

    IE, replaceChild, name-Attribut identisch, Zugriff schlägt fehl

    Zuletzt geändert von Chriz; 27.04.2010, 15:29.
    Hallo,

    folgender Code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title></title>

    <script type="text/javascript">
        var myForm = {
            swapInputElement: function() {
                if (this.isTextarea()) {
                    this.createInputText();
                } else {
                    this.createTextarea();
                }
            },

            isTextarea: function() {
                return this.getElement().tagName.toUpperCase() == "TEXTAREA";
            },

            getElement: function() {
                return document.getElementsByName(this.getName())[0];
            },

            getName: function() {
                return "myElement";
            },

            createTextarea: function() {
                var inputText = this.getElement();
                var textarea = document.createElement("textarea");
                textarea.name = this.getName();
                textarea.value = inputText.value;

                inputText.parentNode.replaceChild(textarea, inputText);
            },

            createInputText: function() {
                var textarea = this.getElement();
                var inputText = document.createElement("input");
                inputText.type = "text";
                inputText.name = this.getName();
                inputText.value = textarea.value;

                textarea.parentNode.replaceChild(inputText, textarea);
            }
        }
    </script>
</head>
<body>

    <form action="" method="post">

        <input name="myElement" type="text" value="" />

        <input type="button" onclick="myForm.swapInputElement();return false" value="swap" />

    </form>

</body>
</html>
    Swappt ein Eingabefeld von <input type="text" /> <-> <textarea> und zurück so oft man will.

    FF: funktioniert
    IE8: funktioniert
    IE7: funktioniert nicht

    Konkreter Fehler: der IE 7 kann einmal swappen (input -> textarea), ab dann nicht mehr, weil getElement(), also die Objektsuche fehlschlägt. Kann ich irgendwie den DOM-Cache vom IE refreshen? Anders drauf zugreifen ..?
    Stichworte: -
  • #2
    Ja, das Problem älterer IEs ist bekannt - beim dynamischen Erzeugen von Formularfeldern nehmen sie die Namen in nicht die entsprechenden Collections/NodeLists mit auf.

    Du kannst entweder speziell für den IE die „Alternativ-Syntax“ für createElement verwenden, die in der MSDN im zweiten Beispiel beschrieben ist;
    oder du verzichtest darauf, Elemente über ihren Namen anzusprechen. Da du dir das TEXTAREA-Element selber erstellst, hast du zu dem Zeitpunkt ja auch schon die Referenz darauf vorliegen - also müsstest du dir die nur noch merken, dann brauchst du das Element beim nächsten Aufruf gar nicht erst suchen.
    Wenn das dynamischer sein soll als in deinem kurzen Beispiel, also für mehrere INPUT/TEXTAREA-Paare gemacht werden soll - dann könntest du dir die Referenz auf die zugehörige Textarea auch einfach in einer Eigenschaft am INPUT-Element ablegen.

    Kommentar

    • #3
      Oder jQuery benutzen. Da wurde das sicher irgendwie gelöst..

      Kommentar

      • #4
        zum zweiten Mal heute danke @ChrisB

        Läuft soweit, hatte auch schon überlegt mir die Knoten zu merken, wäre aber etwas frickelig geworden. So läufts nun:
        Code:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title></title>

    <script type="text/javascript">
        var myForm = {
            isIe7: (navigator.userAgent.indexOf("MSIE 7") != -1),

            swapInputElement: function() {
                if (this.isTextarea()) {
                    this.createInputText();
                } else {
                    this.createTextarea();
                }
            },

            isTextarea: function() {
                return this.getElement().tagName.toUpperCase() == "TEXTAREA";
            },

            getElement: function() {
                return document.getElementsByName(this.getName())[0];
            },

            getName: function() {
                return "myElement";
            },

            createTextarea: function() {
                var inputText = this.getElement();
                var textarea  = this.createElement("textarea", {
                    name: this.getName(),
                    value: inputText.value
                });

                inputText.parentNode.replaceChild(textarea, inputText);
            },

            createInputText: function() {
                var textarea = this.getElement();
                var inputText = this.createElement("input", {
                    type: "text",
                    name: this.getName(),
                    value: textarea.value
                });

                textarea.parentNode.replaceChild(inputText, textarea);
            },

            createElement: function(tagName, attributes) {
                tagName = tagName.toUpperCase();
                if (this.isIe7) {
                    var htmlTag = '<' + tagName;
                    for (var key in attributes) {
                        if (key != "value") {
                            htmlTag += ' ' + key + '="' + attributes[key] + '"';
                        }
                    }
                    htmlTag += '>';
                    var element = document.createElement(htmlTag);
                    if (typeof attributes.value != "undefined" && (tagName == 'TEXTAREA' || tagName == "INPUT")) {
                        element.value = attributes.value;
                    }
                    return element;
                } else {
                    var element = document.createElement(tagName);
                    for (var key in attributes) {
                        if (key == "value") {
                            element.value = attributes.value;
                        } else {
                            element.setAttribute(key, attributes[key]);
                        }
                    }
                    return element;
                }
            }
        }
    </script>
</head>
<body>

    <form action="" method="post">

        <input name="myElement" type="text" value="" />

        <input type="button" onclick="myForm.swapInputElement();return false" value="swap" />

    </form>

</body>
</html>
        Wobei mein richtiger Code ganz anders aussieht, nur wollte ichs Standalone mal getestet haben.

        Kommentar

        Vorherige Weiter
        Lädt...
        X