Colorpicker in Aktion (Demo)
Webseite vom Colorpicker-Skript

Benutzung

Zuerst werden jQuery und die colorpicker.js eingebunden.

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/colorpicker.js" type="text/javascript"></script>

Anschließend können HTML-Elemente mit dem Aufruf der ColorPicker-Funktion erweitert werden. Die Funktion akzeptiert einige Parameter, die aber alle optional sind. Ruft man die Funktion ohne Parameter auf, öffnet sich der Dialog beim Anklicken des Elements.

$('#element').ColorPicker();

Möchte man eine Farbauswahl direkt auf der Seite anzeigen, verwendet man die flat-Option.

$('#farbauswahl').ColorPicker({
    flat: true,
    color : '#123456',
});

Mit der color-Option lässt sich außerdem eine Farbe vorgeben.

Meistens möchte man die ausgewählte Farbe aber auch noch irgendwie weiterverarbeiten, beispielsweise in ein Formularfeld eintragen. Dazu eignen sich die Optionen onSubmit und onChange, die beim Abspeichern der Farbe (onSubmit) bzw. beim Verändern der Farbe (onChange) aufgerufen werden.

$('input').ColorPicker({
    onSubmit : function(hsb, hex, rgb, element) {
        // hsb = HSB-Farbraum als Objekt ({ 'h' : 100, 'b' : 200, 's' : 300})
        // hex = Hexadezimale Schreibweise (#123456)
        // rgb = RGB-Farbraum als Objekt ({ 'r' : 123, 'g' : 123, 'b' : 123})
        // element = Das Element, an welches der ColorPicker angehangen wurde.
        $(element).val('#' + hex);
    }
});

Das sind die wichtigsten Optionen. Eine ausführlichere Beschreibung aller Optionen findet sich auf der Webseite von ColorPicker.

In dieser Anleitung erkläre ich wie man einfache Fortschrittsbalken mit CSS erstellen kann, und stelle 4 JavaScript-Skripte vor mit denen sich “bewegliche” Fortschrittsbalken erstellen lassen.

Einfache Fortschrittsbalken

Fortschrittsbalken mittels CSS zu erstellen ist nicht weiter schwer, man braucht im Grunde nur zwei Elemente, die übereinander gelegt werden.

Ohne Bilder

Man erstellt ein Element, gibt ihm eine Hintergrundfarbe und weist ihm eine Breite/Höhe zu. In diesem Element erstellt man nun ein zweites Element, dem man ebenfalls eine Hintergrundfarbe (möglichst eine andere, als die vom ersten Element) und die gleiche Höhe wie dem ersten Element zu. Die Breite des zweiten Elements gibt dann an, welchen Wert der Fortschrittsbalken anzeigen soll.

<style type="text/css">
  div.fsb {
    border:1px solid #000;
    background-color:white;
    width:200px;
    height:28px;
    padding:1px;
  }
 
  div.fortschritt {
    background-color:#000;
    height:28px;
    width:50%; /* Fortschritt */
  }
</style>
<!-- [...] -->
<div class="fsb">
  <div class="fortschritt"></div>
</div>

In Aktion sieht das dann so aus: Demo.

Mit Bildern

Möchte man den Fortschrittsbalken etwas schöner gestalten, kann man natürlich auch Bilder verwenden, die Methode funktioniert eigentlich genau so. Der einzige Unterschied ist, das anstatt von Hintergrundfarben Bilder verwendet werden.

div.fsb {
    background:url('normal.png') no-repeat left center;
    width:300px;
    height:30px;
}
 
div.fortschritt {
    background:url('farbig.png') no-repeat left center;
    height:30px;
    width:50%;
}

In Aktion sieht das dann so aus: Demo.

JavaScript-Fortschrittsbalken

Mit JavaScript kann man den Fortschrittsbalken auch Leben einhauchen, bzw. den angezeigten Wert verändern. Ein einfaches JS-Skript, welches die Breite des inneren Elements ändert ist schnell geschrieben. Im folgenden stelle ich allerdings 4 Skripte/Klassen vor, die noch etwas mehr können als nur das. Das erste Skript basiert auf jQuery/jQuery UI, das zweite benötigt nur jQuery, das dritte ist für Prototype und das vierte verwendet mootools.

Ich habe für jedes Skript eine Demo erstellt: Fortschrittsbalken-Demo

jQueryUI – ProgressBar

Die JS-Bibliothek jQuery UI stellt diverse Werkzeuge und Benutzeroberflächen-Elemente bereit. Unter anderem bietet sie auch eine Klasse zur Erstellung von Fortschrittsbalken. Praktischerweise kann man auf der Download-Seite von jQuery UI direkt die Elemente angeben, die man benötigt, so braucht man nicht die ganze Bibliothek runterzuladen/einzubinden (wenn man nur den Fortschrittsbalken braucht), und spart so einiges an Speicherplatz/Datentransfer. Die Bibliothek basiert auf jQuery, dieses muss also auch eingebunden werden.

Eine Besonderheit von jQuery UI: Das Aussehen der Benutzeroberfläche (und somit des Fortschrittsbalkens) wird durch Themen festgelegt. Auf der Webseite von jQuery UI findet sich (unter Gallery) bereits eine kleine Auswahl von fertigen Themen, natürlich ist es auch möglich eigene Themen zu erstellen. Das Thema wird über eine css-Datei definiert, diese muss ebenfalls in die Seite eingebunden werden.

Einbinden

Benötigt werden: jQuery, jQuery UI (Progressbar), und ein jQuery UI Thema.

<link rel="stylesheet" href="jquery-ui/css/ui-lightness/jquery-ui-1.7.2.custom.css">
<script src="jquery-ui/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery-ui/js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

(Die Pfade müssen eventuell angepasst werden.)

HTML

Man erstellt einfach ein div-Element, den Rest erledigt das Skript. Dem Element kann man noch eine ID geben, das macht es leichter es anzusprechen.

<div id="fsb"></div>

Fortschrittsbalken erstellen

Um den Balken zu erstellen, selektiert man das Ziel-Element mit der $()-Funktion, und ruft die Methode progressbar() auf. Mittels dem Parameter value kann man den Ausgangswert des Fortschrittsbalkens angeben. Außerdem kann man, wenn man möchte, mit dem Parameter change auch gleich eine Funktion festlegen, welche aufgerufen wird, wenn der Wert sich ändert. Beide Parameter sind optional.

$(function () {
    $('#fsb').progressbar({
        value:50,
        change: function () { 
            alert($('#fsb').progressbar('option', 'value') + '%');
        }
    });
});

Methoden und Ereignisse

Die Klasse bietet Methoden zum Abfragen und Ändern des angezeigten Werts, sowie ein Ereignis welches ausgelöst wird, wenn der Wert sich ändert.

// Wert aendern
$('#fsb').progressbar('option', 'value', 50);
// Wert abfragen
var wert = $('#fsb').progressbar('option', 'value');

Weitere Informationen zu der Klasse und ihren Methoden finden sich in der offiziellen Dokumentation.

jQuery – ProgressBar

Das Skript jQuery Progress Bar basiert auf jQuery und bietet einige nützliche Funktionen, die die jQuery UI-Variante nicht hat. Es ist möglich verschiedene Bilder zur Anzeige des Fortschritts zu verwenden, so kann man beispielsweise für die ersten 10-20% einen roten Hintergrund, für die nächsten 10-20% dann einen orangen, dann einen gelben und zum Schluss einen grünen Hintergrund verwenden. Es lässt sich auch festlegen ob neben dem Balken auch der Fortschritt noch einmal als Prozentzahl angezeigt werden soll, und auch eine Anzeige des genauen Wertes (123/465) ist möglich. Außerdem ist die Bewegung des Fortschrittsbalkens animiert, es lässt sich sogar die Geschwindigkeit der Animation festlegen.

Einbinden

Benötigt werden jQuery und das Skript selbst.

<script src="jquery-ui/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery.progressbar/js/jquery.progressbar.js" type="text/javascript"></script>

HTML

Auch bei diesem Skript wird nur ein div-Element benötigt, den Rest erstellt das Skript selbst.

<div id="fsb"></div>

Fortschrittsbalken erstellen

Erstellt wird der Fortschrittsbalken mittels der Funktion progressBar(). Dabei gibt es einige Parameter, mittels derer das Aussehen und Verhalten des Fortschrittsbalkens beeinflusst werden können:

• steps und step_duration: Geben an, wie viele Schritte beim Ändern des Anzeigewertes gegangen werden sollen, und wie lange ein Schritt dauert. (Standard: 20/20)
• max: Der max. Wert, bis zu dem der Fortschrittsbalken geht. (Standard: 100)
• showText und textFormat: Ob neben dem Balken noch der Fortschritt in Textform angezeigt werden soll, und ob dieser als Prozentzahl ('percentage' = 50%) oder als Anteil ('fraction' = 50/100) angezeigt werden soll. (Standard: true, 'percentage')
• width und height: Breite und Höhe des Fortschrittsbalkens bzw. der verwendeten Bilder.
• callback: Legt eine Funktion fest, welche aufgerufen wird, wenn sich der Balken bewegt. Die Funktion bekommt ein Argument mitgeliefert, welches das config-Feld, erweitert um die Werte increment (um wie viele Pixel hat sich der Balken bewegt), running_value (aktueller Wert) sowie value (Ziel-Wert).
• boxImage: Pfad zum Bild welches den Balken umschließt.
• barImage: Pfad zum inneren Bild des Balkens. Hier kann auch ein Feld übergeben werden, falls verschiedene Bilder verwendet werden sollen (siehe Beispiel).

$(function () {
    $('#fsb').progressBar(20, {
        boxImage: 'jquery.progressbar/images/progressbar.gif',
        barImage: {
            0: 'jquery.progressbar/images/progressbg_red.gif',
            30: 'jquery.progressbar/images/progressbg_orange.gif',
            50: 'jquery.progressbar/images/progressbg_yellow.gif',
            70: 'jquery.progressbar/images/progressbg_green.gif'
        }
    });
});

Methoden und Ereignisse

Die Klasse bietet ein Ereignis (callback) und keine Methode. Will man den angezeigten Wert ändern, ruft man die Klasse einfach wieder wie folgt auf:

// Aendere Wert auf 50%.
$('#fsb').progressBar(50);

Prototype – jsProgressBarHandler

Die jsProgressBarHandler-Klasse basiert auf Prototype und steht unter der Creative Commons Attribution-Share Alike 2.5 Lizenz. Das tolle an dieser Klasse ist: Sie kann auch automatisch Fortschrittsbalken erstellen, alle span-Elemente mit der CSS-Klasse progressBar, die einen Prozentwert enthalten, werden automatisch zu Fortschrittsbalken umgewandelt. Der herkömmliche Weg über JavaScript funktioniert natürlich auch.

Einbinden der Klasse

Neben der Klasse selbst, muss auch die JavaScript-Bibliothek Prototype eingebunden werden.

<script src="js/prototype/prototype.js" type="text/javascript"></script>
<script src="js/bramus/jsProgressBarHandler.js" type="text/javascript"></script>

HTML

Die Klasse wandelt alle span-Elemente mit der CSS-Klasse progressBar automatisch in Fortschrittsbalken um.

<span class="progressBar" id="fsb">50%</span>

Möchte man den Balken selbst mittels JavaScript erstellen, benötigt man ein div-Element mit einer ID.

<div id="fsb">[Lade Fortschrittsbalken]</div>

Fortschrittsbalken erstellen

Um den Balken selbst mittels JavaScript zu erstellen, muss man nur ein Objekt der Klasse JS_BRAMUS.jsProgressBar erstellen.

var fsb = new JS_BRAMUS.jsProgressBar(
    'fsb', // ID des div-Elements
    50, // Ausgangswert (Prozent)
    {
        showText : true,
        animate : true,
        barImage : 'jsprogressbarhandler/images/bramus/percentImage_back1.png'
    }
);

Der dritte Parameter kann zur Konfiguration verwendet werden, und ist optional. Folgende Optionen gibt es:

• animate: Ob der Fortschrittsbalken animiert sein soll. (Standard: ja)
• showText: Ob der Wert neben dem Balken angezeigt werden soll (Standard: ja)
• width: Breite des Balkens. Nicht vergessen: Das Bild muss ebenfalls angepasst werden. (Standard: 120)
• boxImage: Das Bild um den Balken.
• barImage: Der Hintergrund des Balkens. Hier kann auch ein Feld mit mehreren Bildern angegeben werden, dann ändert sich der Hintergrund, wenn der Balken weiter fortschreitet.
• height: Die Höhe des Balkens. (Standard: 12)
• onTick: Funktion die bei jeder Änderung am Wert des Balkens aufgerufen wird.

Die Standardwerte sind am Anfang der jsProgressBarHandler.js definiert. Dort findet sich auch die Variable autoHook, diese kann man auf false setzen, wenn man nicht möchte, das alle span.progressBar-Elemente automatisch umgewandelt werden. Die Pfade zu den Bildern bzw. die Breite/Höhe will/muss man wahrscheinlich eh ändern.

Methoden und Ereignisse

Die Klasse hat zwei Funktionen und ein Ereignis, welches bei jeder Änderung am Wert aufgerufen wird (onTick). Mit der Funktion getPercentage() kann der aktuelle Wert abgefragt werden, mit setPercentage() kann der Wert verändert werden. Letztere Funktion akzeptiert zwei Parameter, der erste gibt den neuen Wert an, der zweite gibt an ob der Balken direkt zum neuen Wert gehen soll. Wenn man den Wert ändert, während der Balken sich noch bewegt, macht er normalerweise zuerst seine Bewegung zu Ende, bevor er zum neuen Wert geht, ist der zweite Parameter true, verwirft er alle anderen Bewegungen und bewegt sich direkt zum neuen Wert.

// Wert abfragen
var aktuellerWert = fsb.getPercentage();
// Wert aendern
fsb.setPercentage(100);

mootools – dwProgressBar

Die dwProgressBar-Klasse verfolgt einen etwas anderen Ansatz, als die vorigen beiden Klassen. Mit der Klasse können Fortschrittsbalken erstellt, und der angezeigte Wert geändert werden. Um die Animation kümmert sich die Klasse. Ansonsten können (müssen) die Fortschrittsbalken komplett selbst mittels CSS gestaltet werden.

Einbinden der Klasse

Die JavaScript-Bibliothek mootools wird vorausgesetzt. Außerdem muss natürlich die Klasse selbst eingebunden werden.

<script src="mootools-1.2.3-core-yc.js" type="text/javascript"></script>
<script src="dwprogressbar.js" type="text/javascript"></script>

HTML und CSS

Es wird nur ein div-Element benötigt.

<div id="fsb"></div>

Die Gestaltung des Fortschrittsbalkens übernimmt die Klasse nicht, das muss man selber machen. Es gibt drei Elemente, die gestaltet werden können: Der Rahmen, der Balken, und der Text (optional). Beim Erstellen des Fortschrittsbalkens kann angegeben werden, welche ID die Elemente bekommen sollen, über die ID können die Elemente dann mittels CSS gestaltet werden.

Ohne Bilder

Die CSS-Selektoren für einen Fortschrittsbalken ohne Bilder (aber mit Text) könnten z.B. so aussehen:

#rahmen {
	border:1px solid #8C2229;
	width:200px;
	height:20px;
	padding:1px;
	display:inline-block;
}
 
#balken {
	background:#8C2229;
	height:20px;
}
 
#text {
	font-size:16px;
	line-height:20px;
	vertical-align:top;
	padding-left:10px;
	display:inline-block;
}

Mit Bildern

Wenn man den Fortschrittsbalken mit Bildern gestalten möchte, kann man folgende CSS-Selektoren verwenden. Die Höhen- und Breitenangaben müssen natürlich angepasst werden.

#rahmen {
	background:url('rahmen.png') right center no-repeat;
	width:300px;
	height:30px;
}
 
#balken {
	background:url('balken.png') left center no-repeat;
	height:30px;
}

Den Fortschrittsbalken erstellen

Zum Erstellen des Fortschrittsbalkens wird einfach ein neues dwProgressBar-Objekt erstellt.

window.addEvent('domready', function() {
    var fsb = new dwProgressBar({
        // Das Element, in dem der Fortschrittsbalken angezeigt wird
        container: $('fortschrittsbalken'),
        // Startwert (Prozent)
        startPercentage: 50,
        // Geschwindigkeit/Dauer der Animation (in Millisekunden)
        speed: 1000,
        // Die ID des Rahmens
        boxID: 'rahmen',
        // Die ID des Balkens
        percentageID: 'balken',
        // Wieviel Prozent pro Schritt (dwProgressBar.step() geht
        // immer einen Schritt weiter, in diesem Beispiel also 10%.
        step: 10,
        // Erlaube Werte jenseits 100%
        allowMore: false,
        // Prozentwert als Text anzeigen?
        displayText: true,
        // ID für das Textelement
        displayID: 'text',
        // Ereignis, welches aufgerufen wird, wenn der Balken 100%
        // erreicht.
        onComplete: function () {
            alert("Fertig!");
        },
        // Ereignis welches nach jeder abgeschlossenen Änderung am
        // Wert aufgerufen wird. (Wenn man von 10% auf 50% geht,
        // wird es einmal aufgerufen, nämlich wenn 50% erreicht sind.)
        onChange: function () {
            alert("Wert geändert!");
        }
    });
});

Es müssen nur die Optionen container, boxID und percentageID angegeben werden, der Rest ist optional.

Funktionen und Ereignisse

Die Klasse bietet die Funktionen set(neuerwert) und step(), außerdem die Ereignisse onComplete und onChange. Die Ereignisse sind im obigen Beispielquelltext bereits erklärt.

// Wert auf 100% setzen
fsb.set(100);
// Einen Schritt weitergehen (um options.step Prozent)
fsb.step();

Zum Schluss noch einmal die Demo-Seite für die JavaScript-Fortschrittsbalken: Fortschrittsbalken-Demo

Shaun Inman beschreibt in seinem Artikel Styling File Inputs with CSS and the DOM eine Methode diesem Element mittels Java Script und CSS trotzdem ein anderes Aussehen zu verpassen. Wie seine Methode funktioniert, und wie man sie noch verbessern/erweitern kann, erkläre ich in diesem Artikel.

Funktionsweise seiner Methode

Man erstellt ein Element, welches die Schaltfläche darstellen soll. Dieses Element kann man mit CSS gestalten, ihm beispielsweise mittels der background-Eigenschaft ein Hintergrundbild zuweisen. Innerhalb dieses Elements befindet sich dann das input-Element.

<label class="durchsuchen">
    <input type="file" name="datei" class="datei">
</label>

Dieses wird allerdings mittels opacity zu 100% transparent gemacht, so dass man es nicht sieht. Wenn man auf die sichtbare Schaltfläche klickt (also die, die man beliebig mit CSS formatieren kann), klickt man in Wirklichkeit auf die Durchsuchen-Schaltfläche des Eingabeelementes.

Die Durchsuchen-Schaltfläche ist allerdings von Betriebssystem zu Betriebssystem verschieden groß. Wenn die Schaltfläche die man selbst gestaltet hat größer ist, könnte es passieren, das man darauf klickt und nichts passiert. Deswegen muss dafür gesorgt werden, das die echte Durchsuchen-Schaltfläche immer unter der Maus ist, wenn die Maus über der “gefälschten” Schaltfläche ist. Hier kommt dann Java Script ins Spiel, sobald die Maus über der Schaltfläche ist, wird das input-Element so bewegt, das die Durchsuchen-Schaltfläche unter der Maus ist.

Diese Methode hat allerdings einen Nachteil: Es ist zwar möglich, neben der Schaltfläche noch ein Eingabefeld hinzuzufügen, welches den Dateinamen/Pfad der ausgewählten Datei anzeigt, es ist aber nicht möglich dieses Eingabeelement zu verändern, bzw. anschließend den Wert des input-Elements anzupassen/zu verändern. Das geht bei Dateielementen aus Sicherheitsgründen nicht, denn sonst könnte ein böswilliger Programmierer ja ein verstecktes Dateielement erstellen, welches ohne das der Benutzer davon etwas mitbekommt Dateien von seinem Recher hochlädt.

Vorteile:

• Dateielemente können an das Aussehen der Webseite/der anderen Formularelemente angepasst werden.
• Wenn der Browser des Benutzers kein Java Script unterstützt, sieht der Benutzer einfach das normale Dateielement.

Nachteile:

• Etwas umständlich.
• Der Benutzer kann den Pfad zur Datei nicht mehr direkt im Eingabefeld eingeben, er muss die Durchsuchen-Schaltfläche benutzen.

Ich habe auch wieder eine Demo-Seite eingerichtet: Demo.

Benutzung

Zuerst wird das Skript im head-Bereich eingebunden, dann muss/will man noch die Schaltfläche mit CSS gestalten, außerdem muss das Dateielement sich innerhalb des umgestalteten Elementes befinden. Ein Aufruf von SI.Files.stylizeAll() wendet das Skript dann an.

<?xml version="1.0" ?>
<!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>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Dateielement umgestalten</title>
        <style type="text/css">         
            .SI-FILES-STYLIZED label.durchsuchen {
                /* Hier kann die Schaltflaeche gestaltet werden. */
                width:140px;
                height:30px;
                background: url('durchsuchen.png') 0 0 no-repeat;
                display:inline-block;
                overflow:hidden;
                cursor:pointer;
            }
 
            .SI-FILES-STYLIZED label.durchsuchen input.datei {
                position:relative;
                height:100%;
                width:auto;
                opacity:0;
                -moz-opacity:0;
                filter:alpha(opacity=0); 
            }
        </style>
        <script type="text/javascript" src="si.files.js"></script>
    </head>
    <body>
        <form action="..." enctype="multipart/form-data" method="post">
            <label class="durchsuchen">
                <input type="file" class="datei" name="datei">
            </label>
            <input type="submit" value="Hochladen" />
            <script type="text/javascript">
                SI.Files.stylizeAll();
            </script>
        </form>
    </body>
</html>

Das Skript weist dem html-Element die Klasse SI-FILES-STYLIZED zu. Der erste CSS-Selektor des Beispiels ist für die sichtbare Schaltfläche, hier kann diese umgestaltet werden. Der zweite Selektor sorgt dafür das das input-Element nicht sichtbar ist. Anstatt eines label-Elements kann natürlich auch irgendein anderes Element verwendet werden, die Klassennamen sind auch austauschbar.

Internet Explorer 7

Der Internet Explorer 7 macht leider ein paar Probleme, das Fenster zum Auswählen einer Datei öffnet sich, egal wo man klickt, nachdem man mit der Maus einmal über dem input-Element war. Glücklicherweise hat jemand namens jxtps eine Lösung für dieses Problem gefunden (siehe Kommentar 29 zum Artikel von Shaun Inman). Um das Problem im IE 7 zu beheben, müssen 3 Zeilen Quelltext nach Zeile 55 der si.files.js hinzugefügt werden.

51
52
53
54
55
56
57
58
59
60
61
62

var x = e.pageX - ox;
var y = e.pageY - oy;
var w = this.file.offsetWidth;
var h = this.file.offsetHeight;
 
// Fix for IE7+, otherwise the control can get dragged outside despite overflow: hidden;
if (x < 0 || y < 0 || x > this.offsetWidth || y > this.offsetHeight) { 
	x = 0; y = 0; h = 0; w = 30;
}
 
this.file.style.top	= y - (h / 2)  + 'px';
this.file.style.left	= x - (w - 30) + 'px';

Die ausgewählte Datei anzeigen

Aus Gründen der Benutzerfreundlichkeit sollte der Benutzer den Namen der ausgewählten Datei auch sehen können. Das geht ganz einfach: Man erstellt ein Element, in welches bei jeder Veränderung am input-Element der Wert von selbigem kopiert wird. Das kann ein Texteingabefeld sein, oder beispielsweise ein span-Element, ich bevorzuge letzteres, denn da der Dateiname eh nicht manuell geändert werden kann ist ein Texteingabefeld für den Benutzer ziemlich verwirrend.

<div id="d">
<!-- Hier wird das Text-Element mittels JS eingefuegt -->
    <label class="durchsuchen" id="durchsuchen">
        <input type="file" class="datei" id="datei" name="datei">
    </label>
</div>
<script type="text/javascript">
    SI.Files.stylizeAll();
 
    if (SI.Files.able) {
        var anzeige = document.createElement('span');
        anzeige.innerHTML = 'Keine Datei ausgewählt.';
        anzeige.id = 'anzeige';
 
        document.getElementById('d').insertBefore(anzeige, document.getElementById('durchsuchen'));
 
        document.getElementById('datei').onchange = function () {
            var datei = document.getElementById('datei').value;
            document.getElementById('anzeige').innerHTML = datei;
        };
    }
</script>

Das Element wird per Java Script erstellt, da Benutzer ohne JavaScript sonst trotzdem neben dem Dateielement noch “Keine Datei ausgewählt” stehen hätten.

Wenn der Benutzer das erste Feld ausgefüllt hat, wäre es praktisch, wenn der Browser automatisch zum zweiten Feld weiterspringen würde. Sowas lässt sich mit Java Script leicht realisieren. Noch besser wäre es natürlich, wenn der Benutzer auch mit den Pfeiltasten zwischen den Feldern navigieren könnte, oder wenn nur bestimmte Zeichen vom Benutzer eingegeben werden können.

In diesem Artikel erkläre ich, wie man mittels Java Script ein solches automatisches Weiterspringen zwischen Formularfeldern programmiert. Außerdem stelle ich eine kleine Klasse vor die es zusätzlich dazu noch ermöglicht mit den Pfeiltasten durch die Felder zu navigieren und die Eingabe auf bestimmte Zeichen zu begrenzen.

Automatisches Weiterspringen

Man überprüft einfach bei jedem Tastendruck, ob das aktuelle Feld bereits voll ist, ist das der Fall wird das nächste Feld (sofern vorhanden) aktiviert. Bei einem Tastendruck werden drei Ereignisse ausgelöst:

• keydown, wenn eine Taste gedrückt wird.
• keypress, wenn ein Zeichen geschrieben wird bzw. die Aktion der Taste ausgeführt wird (z.B. neue Zeile bei der Eingabetaste).
• keyup, wenn die Taste wieder losgelassen wird.

Das keypress-Ereignis halte ich für am besten geeignet, da es sofort auf jedes eingegebene Zeichen reagiert. Um überprüfen zu können, ob ein Feld bereits voll ist, muss erstmal bekannt sein wie viele Zeichen ein Feld aufnehmen darf, hierzu wird das maxlength-Attribut des input-Elements verwendet.

Die Überprüfung selbst ist einfach, man vergleicht einfach die max. Länge mit der Länge des Inhalts, ist sie gleich, wird zum nächsten Element gesprungen. Der Inhalt des Eingabefelds ist in der Eigenschaft value gespeichert, die Länge lässt sich über die Eigenschaft length von value ermitteln. Jedes Formular-Element hat die Methode focus(), mittels derer man das Element “aktivieren” kann, so dass der Eingabezeiger dorthin springt.

<!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" dir="ltr" lang="de-DE">
  <head>
    <title>Seriennummer-Eingabe</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript">
    function weiterspringen(aktuellesFeld, naechstesFeld) {
      if (aktuellesFeld.value.length == aktuellesFeld.getAttribute('maxlength'))
        document.getElementsByName(naechstesFeld)[0].focus();
    }
    </script>
  </head>
  <body>
    <h1>Produkt-Aktivierung</h1>
    <span>Bitte geben Sie die Seriennummer des von Ihnen erworbenen Produkts an.</span>
    <form name="formular" method="post" action="seriennummer.html">
      <input onkeypress="weiterspringen(this, 's2');" maxlength="4" name="s1" type="text"> - 
      <input onkeypress="weiterspringen(this, 's3');" maxlength="4" name="s2" type="text"> - 
      <input maxlength="4" name="s3" type="text">
    </form>
  </body>
</html>

Ich habe auch diesmal wieder eine Beispielseite angelegt:

Zur Beispielseite

Die Klasse

Ich habe eine kleine Klasse programmiert die noch etwas mehr kann:

• Der Benutzer kann nur noch bestimmte Zeichen eingeben. Wenn eine Seriennummer also beispielsweise keine Zahlen enthalten kann, kann der Benutzer sie auch nicht eingeben.
• Man kann auch mit den Pfeiltasten hin- und her navigieren, auch zwischen den Feldern.
• Im Internet Explorer und bei Gecko-basierten Browsern (z.B. Firefox) springt der Eingabezeiger automatisch zum letzten Zeichen, wenn man ein Feld zurück springt.

Um die Funktionalität zu aktivieren erstellt man einfach eine neue Instanz der Klasse, und weist ihr mittels der Methode elementHinzufuegen(<Element>) die einzelnen Felder zu.

window.onload = function() {
	var sn = new GeteilteEingabe();
	sn.elementHinzufuegen(document.getElementsByName('s1')[0]);
	sn.elementHinzufuegen(document.getElementsByName('s2')[0]);
	sn.elementHinzufuegen(document.getElementsByName('s3')[0]);
}

Die Variable erlaubteZeichen kann angepasst werden, um festzulegen, welche Zeichen der Benutzer in den Eingabefeldern der Seriennummer benutzen darf.

var erlaubteZeichen = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ123456789';

Für die Klasse habe ich natürlich auch wieder eine Beispielseite zur Demonstration erstellt.

Zum Quelltext der Klasse
Zur Beispielseite

• Beim Schreiben von Kurznachrichten (SMS) ist die maximale Anzahl von Zeichen begrenzt. Bei privaten Nachrichten in Foren, oder Kontaktformularen gibt es oft ähnliche Begrenzungen. Hier ist eine Anzeige der noch verfügbaren Zeichen sinnvoll.
• Eine Anzeige der Wortzahl ist beispielsweise für einen Redakteur oder Blogger nützlich, denn so sieht er ob er seinen Text vielleicht etwas kürzen, oder noch etwas mehr schreiben sollte.

In diesem Artikel stelle ich einen einfachen Buchstabenzähler bzw. Wörterzähler in Form einer Java Script-Klasse vor, und erkläre seine Funktionsweise.

Der Wörter- bzw. Buchstabenzähler

Die Zählerklasse ist in der Lage die Wörter und Buchstaben in einem Eingabefeld zu zählen. Außerdem können Angaben zur maximalen Anzahl von Zeichen/Wörtern gemacht werden, zusätzlich kann eine Funktion angegeben werden, welche beim Überschreiten der maximalen Anzahl aufgerufen wird.

Die Zählerklasse
Beispielseite (Texteingabe mit Wörter- und Zeichenzähler)

Benutzung der Klasse

Beim Erstellen der Klasse wird die ID des Eingabeelementes angegeben, dessen Inhalt ausgewertet werden soll. Sobald eine der Zählerfunktionen aufgerufen wird, bindet die Klasse die Funktion zum Zählen der Zeichen bzw. die zum Zählen der Wörter an die onchange- und onkeyup-Ereignisse. Bei jeder Veränderung des Textes wird neu gezählt und die Anzeige aktualisiert.

// Wenn der Zähler sofort loszählen soll, kann er einfach beim onload-
// Ereignis initialisiert werden.
window.onload = function () {
	// Wörter- und Buchstabenzähler initialisieren
	// 'text' ist die ID des Eingabefeldes
	var eingabenzaehler = new EingabenZaehler('text');
 
	// Maximale Anzahl an Buchstaben festlegen. (450)
	// 'bmax' ist die ID des Elements, in dem die maximale Anzahl von 
	// Buchstaben angezeigt wird. text_einfaerben ist die Funktion, 
	// die beim Überschreiten der max. Anzahl aufgerufen wird
	eingabenzaehler.maxBuchstaben(450, 'bmax', text_einfaerben);
	// Diese Funktion hat auch noch einen vierten, optionalen Parameter,
	// der festlegt, wie lang ein Wort maximal sein darf. Ab dieser Zahl wird es
	// als mehrere Wörter gezählt. Die Voreinstellung ist 50. Ein Wort aus 153
	// Zeichen würde also als 3 Wörter gezählt werden.
 
	// Man könnte auch eine max. Anzahl Wörter festlegen.
	// eingabenzaehler.maxWoerter(100, 'wmax', max_woerter);
 
	// Wörterzähler aktivieren, 'wz' ist die ID des Elements in dem
	// die Anzahl der Wörter angezeigt wird.
	eingabenzaehler.woerterZaehler('wz');
 
	// Buchstabenzähler aktivieren, 'bz' ist die ID des Elements in dem
	// die Anzahl der Buchstaben angezeigt wird.
	eingabenzaehler.buchstabenZaehler('bz');
};

Die beim Erreichen der maximalen Zeichen/Wort-Anzahl aufgerufene Funktion muss einen Parameter annehmen, welcher angibt ob die max. Anzahl überschritten wurde. Wenn die max. Anzahl überschritten wurde, wird true als 1. Parameter mitgeliefert, ansonsten false. Die Funktion könnte beispielsweise so aussehen:

function text_einfaerben(drueber) {
	// Variablen initialisieren (beim ersten Aufruf)
	if (typeof this.geaendert == 'undefined') {
		this.geaendert = false;
		this.alteFarbe = document.getElementById('warnung').style.color;
	}
	// max. Anzahl überschritten, färbe Text rot ein.
	if (drueber && this.geaendert === false) {
		this.geaendert = true;
		document.getElementById('warnung').style.color = 'red';
	}
	// max. Anzahl nicht oder nicht mehr überschritten, normale Farbe.
	else if (drueber === false) {
		this.geaendert = false;
		document.getElementById('warnung').style.color = this.alteFarbe;
	}
}

Funktionsweise

Das Zählen der Zeichen in einem Eingabefeld gestaltet sich ziemlich einfach. Jedes Text-Eingabefeld hat die Eigenschaft value, in der der eingegebene Text enthalten ist. Diese Eigenschaft hat wiederum die Eigenschaft length, die angibt wie viele Zeichen der Text enthält.

anzahl = eingabefeld.value.length;

Herauszufinden, aus wie vielen Wörtern ein Text besteht, ist hingegen schon schwieriger. Es genügt nicht, einfach alle Leerzeichen zu zählen, denn so würden mehrere Leerzeichen auch als mehrere Wörter gezählt werden. Außerdem gibt es noch andere Zeichen, mit denen Wörter getrennt werden können, beispielsweise Tabulatoren, Zeilenumbrüche oder Kommata.

Die Klasse geht zum Zählen der Wörter den gesamten Text Zeichen für Zeichen durch, und merkt sich mittels der Variable imwort ob der Zeiger sich gerade in einem Wort befindet, oder nicht. Immer wenn ein Zeichen kommt, welches kein Teil eines Wortes ist (Leerzeichen, Zeilenumbruch, Komma, Punkt, etc.) wird die Anzahl der Wörter um eins erhöht und die Variable imwort zurückgesetzt. Die imwort-Variable wird gleichzeitig dazu verwendet die Länge eines Wortes zu erfahren, so dass sehr lange Wörter als mehrere Wörter gezählt werden.

Eine Funktion, die es verhindert, das der Benutzer weiterschreibt, wenn die max. Wort/Zeichen-Anzahl erreicht ist hat die Klasse ebenfalls nicht. Solche Funktionen behindern den Benutzer nur, und können ohnehin leicht umgangen werden. Solche Funktionen verhindern, dass der Benutzer seinen Text erst einmal zu Ende schreibt, und dann guckt, was er weglassen kann, um die Begrenzung einzuhalten.

Verbesserungsmöglichkeiten

Bei jeder Veränderung, und jedem neuen Zeichen zählt die Klasse neu, bei längeren Texten und älteren Rechnern kann das die Ausführung ziemlich verlangsamen. Man könnte die Klasse aber einfach so umschreiben, das nur alle X Sekunden neu gezählt wird, und nicht bei jeder Veränderung.

Ein paar einfache Java Script-Funktionen schaffen da Abhilfe. Vor dem Absenden oder Zurücksetzen eines Formulars kann der Benutzer noch einmal gefragt werden ob er das wirklich tun will. Auch vor dem Verlassen/Schließen der Seite lässt sich eine solche Abfrage erstellen. Außerdem erkläre ich, wie man eine Schaltfläche erst nach einer bestimmten Zeit aktivieren kann.

Zurücksetzen der Formularfelder

Um dem Benutzer die Möglichkeit zu geben, die Formularfelder wieder auf den Anfangswert zurückzusetzen bzw. sie wieder zu leeren genügt ein input-Element vom Typ reset.

<input type="reset" value="Zur&uuml;cksetzen" />

Mit Java Script ist es allerdings auch möglich, beim Zurücksetzen des Formulars noch weitere Aktionen auszuführen oder das Zurücksetzen besser zu steuern. So ist es beispielsweise möglich nur bestimmte Felder zurückzusetzen oder den Benutzer zu fragen ob er die Daten wirklich zurücksetzen möchte. Dazu trägt man im onreset-Ereignis des form-Elementes die Funktion ein, die beim Zurücksetzen des Formulars ausgeführt werden soll.

<form action="..." onreset="return wirklichZuruecksetzen();">

Es ist auch möglich die Funktion einen Wert zurückgeben zu lassen, mit dem man steuern kann ob das Formular auch wirklich zurückgesetzt wird. Gibt die aufgerufene Funktion false zurück wird das Formular nicht zurückgesetzt, bei true wird es zurückgesetzt.

function wirklichZuruecksetzen() {
	return confirm('Alle Eingaben loeschen?');
	// Anstatt dessen koennte man hier auch nur bestimmte Felder zuruecksetzen und
	// false zurueckgeben.
}

Abfrage vor dem Absenden

Um eine Abfrage vor dem Absenden zu erstellen, trägt man einfach eine Funktion beim onsubmit-Ereignis des form-Elements ein, auch hier entscheidet wieder der Rückgabewert darüber ob das Formular abgesendet wird.

<form action="..." onsubmit="return confirm('Daten abschicken?');">

Der Vorteil dieser Methode ist, das sie schnell und einfach programmiert ist, der Nachteil das sie nur funktioniert, wenn der Benutzer Java Script aktiviert hat bzw. sein Browser Java Script unterstützt. Bei wichtigen Formularen (beispielsweise einer Bestellung) ist es empfehlenswert, die Daten erst an eine Zwischenseite zu senden, welche noch einmal alle Eingaben auflistet und auf der noch einmal das Absenden bestätigt werden muss.

Im onsubmit-Ereignis lässt sich übrigens nicht nur eine Abfrage einbauen. Man könnte beispielsweise auch überprüfen ob alle Felder (richtig) ausgefüllt sind, und den Benutzer auf eventuelle Fehler hinweisen/auffordern diese zu korrigieren.

Verlassen/Schließen des Formulars: Abfrage bzw. Funktion ausführen

Man kann den Benutzer vor dem Verlassen der aktuellen Seite zu fragen ob er die Seite wirklich verlassen möchte. Dazu kann das onbeforeunload-Ereignis verwendet werden, welches heutzutage von den meisten Browsern unterstützt wird, obwohl es nicht zum Standard gehört.

/* Fragt den Benutzer, ob er die Seite wirklich verlassen moechte.
 */
window.onbeforeunload = function (e) {
	// Hier koennte man noch abfragen ob bereits Eingaben getaetigt wurden,
	// wenn nicht, braucht man in den meisten Faellen wohl auch keine Nachricht
	// anzeigen.
	var nachricht = 'Sie haben das Formular noch nicht abgesendet, möchten Sie das Fenster trotzdem schließen?';
 
	var e = e || window.event;
 
	if (e) {
		e.returnValue = nachricht;
	}
 
	return nachricht;
};
 
window.onload = function() {
	// Keine Meldung ausgeben, wenn der Benutzer die Seite ueber die
	// Absenden-Schaltflaeche verlaesst.
	for (var i = 0; i < document.forms.length; i++)
		document.forms[i].onsubmit = function () { window.onbeforeunload = ''; };
};

Die dem onbeforeunload-Ereignis zugewiesene Funktion sorgt dafür das der Benutzer beim Schließen des Fensters bzw. beim Verlassen der Seite gefragt wird ob er die Seite wirklich schließen möchte. Damit das geschieht, muss die Nachricht, die angezeigt werden soll in das returnValue-Element von dem Ereignis geschrieben, und als Rückgabewert zurückgegeben werden. Bleibt returnValue leer bzw. wird nichts zurückgegeben, erscheint auch keine Nachricht.

Absenden-Schaltfläche erst nach Ablauf einer bestimmten Zeit freigeben

Es ist möglich die Absenden-Schaltfläche erst nach Ablauf einer bestimmten Zeit zu aktivieren, so dass der Benutzer sie vorher nicht anklicken kann. Das ist beispielsweise in einem Forum sinnvoll, wo der Benutzer nur alle 60 Sekunden einen Beitrag schreiben kann. Der Browser des Benutzers stellt die Schaltfläche ausgegraut da, und zeigt auf der Schaltfläche an wie lange es noch dauert bis das Formular abgesendet werden kann. Die Zeit muss selbstverständlich auch serverseitig überprüft werden, diese Funktion ist nur dazu gedacht, es dem Benutzer einfacher zu machen, zu erkennen wann er auf die Absenden-Schaltfläche klicken kann. Durch das Deaktivieren von Java Script kann die Funktion “umgangen” werden, sie stellt also keinen Sicherheitsmechanismus dar!

/* Sorgt dafuer, das eine Schaltflaeche erst nach Ablauf einer bestimmten Zeit
 * klickbar wird, kann aber leicht "umgangen" werden.
 */
function AbsendenENA(sf, zeit) {
	var self = this;
	var intervall = window.setInterval(function() { self.aktualisieren() }, 1000);
	sf.disabled = true;
	var sftext = sf.value;
 
	this.aktualisieren = function() {
		if (zeit > 0) {
			sf.value = sftext + '(' + zeit + ')';
		}
		else {
			sf.value = sftext;
			sf.disabled = false;
			window.clearInterval(intervall);
		}
		zeit--;
	};
 
	this.aktualisieren();
}
 
window.onload = function() {
	// Absenden-Schaltflaeche erst nach einer bestimmten Zeit benutzbar machen
	new AbsendenENA(document.getElementById('abschicken'), 20);
};

Im Beispiel wird eine neue Instanz des AbsendenENA-Objekts erstellt, der erste Parameter ist das Schaltflächen-Objekt (mit der ID abschicken), der zweite die Zeit bis zum Aktivieren, in Sekunden. Die Klasse kann theoretisch an jeder Stelle benutzt werden, im Beispiel wird sie beim onload-Ereignis aufgerufen.

Ich rate dazu, die Funktion nur an Stellen zu verwenden, an denen es dem Benutzer aus technischen (oder auch anderen) Gründen eh nicht möglich wäre das Formular vor Ablauf der Zeit abzuschicken, beispielsweise weil ein Spamschutz das Abschicken serverseitig eh nur alle X Sekunden zulässt. Man kann den Benutzer mit einer solchen Funktion nicht dazu zwingen sich irgendwelche Forenregeln, AGBs, oder sonstwas durchzulesen.

Per JavaScript CSS-Eigenschaften verändern

Jedes erlaubte Attribut eines HTML-Elements stellt auch eine DOM-Eigenschaft dieses Elements dar. Der Zugriff auf die CSS-Eigenschaften eines Elements ist also über die Eigenschaft style möglich. Die einzelnen CSS-Eigenschaften sind wiederum Eigenschaften von style.

Ein Beispiel:

// Text im HTML-Element mit der ID beschreibung rot färben
document.getElementById('beschreibung').style.color = 'red';

Dabei muss man beachten das Eigenschaften die einen Bindestrich enthalten etwas anders geschrieben werden. Bei solchen Eigenschaften wird anstelle des Bindestrichs einfach der nächste Buchstabe großgeschrieben.

// text-decoration:line-through;
document.getElementById('beschreibung').style.textDecoration = 'line-through';

Deckkraft mit JavaScript ändern

Um die Deckkraft eines Elements mit JavaScript zu verändern muss man einfach über die style-Eigenschaft den entsprechenden CSS-Eigenschaften neue Werte zuweisen. MozOpacity für Mozilla, KhtmlOpacity für Webkit, filter für den Internet Explorer und opacity für neuere Browser. Folgende Funktion tut genau das. Der erste Parameter ist die ID des HTML-Elements dessen Deckkraft geändert werden soll und der zweite Parameter ist ein Wert von 0 (komplett durchsichtig) bis 100 (voll sichtbar).

function aendereDeckkraft(id, transparenz) {
	var style = document.getElementById(id).style;
	style.filter = "alpha(opacity=" + transparenz + ")";
	transparenz /= 100;
	style.opacity = transparenz;
	style.MozOpacity = transparenz;
	style.KhtmlOpacity = transparenz;
}

Filter erwartet einen Wert von 0-100, die anderen 3 Eigenschaften erwarten einen Wert zwischen 0 und 1. Deswegen wird der Wert der Variable transparenz durch 100 geteilt nachdem filter der neue Wert zugewiesen wurde.

Etwas langsamer

Es sieht natürlich viel besser aus wenn sich die Deckkraft nicht schlagartig ändert sondern langsam von einem Zustand in den anderen übergeht. Dazu verringert bzw. erhöht man einfach in kurzen Zeitabständen immer wieder die Deckkraft bis der gewünschte Wert erreicht ist. Dafür eignet sich die Funktion setTimeout recht gut.

function aendereSichtbarkeit(id, anfang, ende, zeit) {
	var schritte = Math.abs(anfang - ende);
	if (schritte == 0) return;
	var geschwindigkeit = Math.round(zeit / schritte);
	for (var i = 1; i <= schritte; i++) {
		if (anfang > ende) { var neu = anfang - i; }
		else { var neu = anfang + i; }
		setTimeout("aendereDeckkraft('" + id + "', " + neu + ")", (i * geschwindigkeit));
	}
}

Der erste Parameter der Funktion gibt wieder die ID des HTML-Elements an, Parameter 2 und 3 den Start- und Endwert für die Deckkraft und der vierte Parameter legt fest wie lange es dauern soll die Deckkraft zu ändern (in Millisekunden).

Verblassen, Sichtbar machen, Sichtbarkeit wechseln

Um ein Element verblassen zu lassen kann diese Funktion verwendet werden.

function verblassen(id, zeit) {
	var aktuell = aktuelleSichtbarkeit(id);
	aendereSichtbarkeit(id, aktuell, 0, zeit);
}

Die Funktion um ein Element wieder sichtbar zu machen ist ähnlich.

function sichtbarMachen(id, zeit) {
	var aktuell = aktuelleSichtbarkeit(id, 0);
	aendereSichtbarkeit(id, aktuell, 100, zeit);
}

Wenn man die Deckkraft wechseln möchte (nicht voll sichtbare Elemente werden zu 100% sichtbar, sichtbare werden unsichtbar), kann man diese Funktion benutzen:

function wechseln(id, zeit) {
	var aktuell = aktuelleSichtbarkeit(id);
 
	if (aktuell == 100) {
		aendereSichtbarkeit(id, 100, 0, zeit);
	}
	else {
		aendereSichtbarkeit(id, aktuell, 100, zeit);
	}
}

Die aktuelle Deckkraft eines Elements herausfinden

Will man herausfinden welche Deckkraft ein Element hat, kann diese Funktion benutzt werden.

function aktuelleSichtbarkeit(id, vorgabe) {
	var vorgabe = (vorgabe == null) ? 100 : vorgabe;
	var aktuell = parseFloat(document.getElementById(id).style.opacity);
	if (isNaN(aktuell)) { aktuell = vorgabe / 100; }
 
	aktuell = aktuell * 100;
	return aktuell;
}

Die Funktion überprüft allerdings nur die CSS-Eigenschaft opacity, wenn die Deckkraft vorher mit aendereDeckkraft geändert wurde funktioniert das immer, da die Funktion diese Eigenschaft verändert. Es gibt aber noch andere Möglichkeiten Elemente transparent/unsichtbar zu machen (visibility, oder proprietäre Eigenschaften wie -moz-opacity). Man sollte die Funktion also nur benutzen um die Deckkraft von Elementen abzufragen die mit den hier beschriebenen Funktionen geändert wurde. Wenn opacity keinen Wert hat wird, falls angegeben, der Wert des Parameters vorgabe zurückgegeben, ansonsten wird eine Deckkraft von 100% angenommen.

Beispielseite

Ich habe wieder eine Beispielseite eingerichtet auf der man die in diesem Artikel beschriebenen Effekte ausprobieren kann.

Zur Beispielseite

Doch viele Benutzer wissen gar nicht das ihr Browser veraltet ist bzw. das man den Browser überhaupt aktualisieren kann. Browser-Update.org ist eine noch relativ neue Initiative mit dem Ziel genau das zu ändern.

Browser-Update.org

Die Seite bietet einen kleinen JavaScript-Quelltext an, den man in die eigene Webseite einbinden kann. Dieser überprüft die Browserversion des Benutzers, und falls er einen veralteten Browser verwendet bekommt er einen kleinen unaufdringlichen Warnhinweis zu sehen, der ihn auf die Nachteile eines veralteten Browsers und die Möglichkeit selbigen zu aktualisieren hinweist. Der Hinweis enthält einen Link auf eine Seite auf der sich eine Liste von Gründen für eine Aktualisierung sowie Hinweise und Links zu aktuellen Browsern findet.

Wenn der Benutzer den Hinweis ignoriert wird selbiger auch erstmal einige Zeit lang nicht mehr angezeigt, der Benutzer wird also nicht dauerhaft von dem Hinweis genervt. Es ist auch möglich einzustellen bei welchen Versionen der Besucher eine Warnung angezeigt bekommen soll, und bei welchen nicht.

Fast 400 Seiten benutzen das Skript bereits

Laut den Statistiken von Browser-Update.org wird das Skript bereits von fast 400 Seiten verwendet und konnte bereits fast 500 Benutzer dazu überreden ihren Browser zu aktualisieren (wobei ich mich frage wie das gemessen wird).

Ich finde diese Initiative sinnvoll, deswegen läuft dieses Skript ab heute auch auf meinem Blog.