[ERLEDIGT] Styling an input type="file", Quirksmode

hypnoticum · 14 Oktober 2013

Ich hatte ein Problem, als ich einen Fileinput wie auf Quirksmode beschrieben integriert habe.
Mittlerweile habe ich die Lösung dafür bzw die Fehler in meinem Code selber gefunden und den Quelltext unten entsprechend angepasst.
Alles war soweit schön und gut, solange der Benutzer nicht auf die Idee kam sich mit dem Tabulator duch das Formular zu hangeln. Dann blieb er bei dem fakefile mit drei tabs hängen und konnte außerdem den Text in dem Feld löschen, ohne dass die zuvor mit dem Filebrowser getroffene Auswahl ebenfalls ungültig wurde.
Abhilfe schafft das attribut tabindex="-1".

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style type="text/css">
            /* ------------------ Styling an input type="file" (ref quirksmode.com)------------------ */
           
            .inputDiv {
                position: relative;
            }
           
            .inputFile.hidden {
                position: relative;
                -moz-opacity:0 ;
                filter:alpha(opacity: 0);
                opacity: 0;
                z-index: 2;
            }
           
            .fakefile {
                position: absolute;
                top: 0px;
                left: 0px;
                z-index: 1;
                width: 100%;
            }
           
            .fakefile input {
                margin-left: 0;
            } 
        </style>
       
        <script type="text/javascript">
            // <!--
                   
            var W3CDOM = (document.createElement && document.getElementsByTagName);
           
            function init_FileUpload() {
                if (!W3CDOM) return;

                var x = document.getElementsByName('fileatt');
                x[0].relatedElement = document.getElementsByName('fakefileatt')[0];
                x[0].addEventListener("change", function(event) {
                    // alert("debug fileInEventListener: New Files!");
                   
                    files = this.files;
                    len = files.length;
                    this.relatedElement.value = '';
                   
                    for (var j = 0; j < len; j++) {
                        this.relatedElement.value += files[j].name + '; ';
                    }
                    //x[0] focus
                }, false);
            }
            // -->
        </script>
    </head>
   
    <body onload="init_FileUpload()">
        <div class="labelAlign">
            <label>Ein L&ouml;ffel f&uuml;r Oma:</label><br />
            <input type="text" name="Oma" />
        </div>
                   
        <div class="labelAlign">
            <label>Ein L&ouml;ffel f&uuml;r Opa: (optional)</label><br />
            <div class="inputDiv">
                <input name="fileatt"  type="file" class="inputFile hidden"  multiple />
                <div class="fakefile">
                    <!-- <input> -->
                    <input name="fakefileatt" tabindex="-1"/>
                </div>
            </div>
        </div>
       
        <div class="labelAlign">
            <label>Ein L&ouml;ffel f&uuml;r Mama:</label><br />
            <input type="text" name="Mama" />
        </div>
    </body>
</html>

[ERLEDIGT] Styling an input type="file", Quirksmode

hypnoticum

Neues Mitglied

Neueste Beiträge