Javascript ist Toll!

Die 4 fiesesten Javascript IE Probleme

Ich frag mich warum ich diesen Artikel nicht schon viel früher geschrieben habe. Ich habe diese Probleme schon viele Male gelesen und immer wieder musste ich selbst suchen wo das Problem liegt. Ich habe also oft genug selbst mit diesen Problemen zu kämpfen gehabt und habe wertvolle Lebenszeit damit verschwendet, Bugs zu finden, die keine waren.

Deshalb habe ich hier mal die Liste der größten und am schwersten zu findesten IE Bugs beim programmieren von Javascript, zusammengestellt.

focus() Probleme mit Firefox

Firefox hat seit Urzeiten Probleme mit dem setzten des focus auf ein Textfeld in bestimmten Fällen. Einmal wenn der Fokus unmittelbar nach einem onblur Event gesetzt werden soll oder wenn vor dem Fokus ein alert() Fenster geöffnet wird.

Die Lösung, die in obigen Artikel beschrieben wird, autocomplete zu deaktivieren, funktioniert zumindest in der 2'er Version nicht mehr. Die einzige Lösung scheint zu sein, unmittelbar nach einem blur Event oder alert() Fenster den focus wieder auf ein Feld zu setzen, ist ein Timeout abzuwarten. Dazu reicht ein Timeout von einer Millisekunde.

Beispiel

function setFocus(el) {

    var self = el;

    if(el.value) return;

    alert('Kein Text!');

    window.setTimeout( function() { self.focus();}, 1);

}

Beschreibung

Beim verlassen der Felder wird geprüft ob ein Text eingeben wurde. Ist es leer, erscheint eine Meldung. Nach dem wegklicken des Meldungsfensters soll das Eingabefeld den Fokus erhalten. Im ersten Fall nach einem kurzen Timeout, im zweiten ohne

Breite des Fensterscrollbalken

Mit dem folgenden Code sollte sich die Breite des Scrollbalken des Browserfenster berechnen lassen.

Wie kann man ein Array mischen?

Ich hab mal wieder ein altes Stück Code ausgegraben, was vielleicht für den einen oder anderen nützlich sein könnte. Die Frage ist, wie kann man ein Array mischen? Ich verwende hier wieder Array.prototype um das Array Objekt um die Methode shuffle() zu erweitern. [... weiterlesen]

Wieviele Tage sind vergangen?

Die Frage war, wieviele Tage sind seit einem Datum vergangen und kann das Date Objekt auch mit einem Datum vor dem 1.1.1970 umgehen? [... weiterlesen]

$_GET für Javascript

Wird mal wieder Zeit für ein bisschen Javascript. Da ständig Lösungen von Fragen in Foren bei mir auflaufen, hier eine, um die GET Parameter mit Javascript abzufragen.

Quersumme

Weil's so grad schön war. Diesmal eine Funktion, um die Quersumme einer Zahl zu ermitteln:

Number.prototype.quersumme = function(forceOneDigit) {

    var z = this.toString().split('');

    for (var i=0, quer=0; i < z.length; quer+=z[i++]-0);

    if( forceOneDigit && quer > 9) return quer.quersumme(forceOneDigit);

    return quer;

}

Beispiel

Nachtrag

Und wieder mal gab es zum Thema einen Thread im selfhtml Forum, wo donp eine sehr effektive und schnelle Lösung präsentierte.

Das sieht dann so aus:

Number.prototype.quersumme = function() {

    return this < 10 ? this : this % 9;

}

Wie finde ich die Mausposition?

Um die Mausposition mit Javascript zu ermitteln, kann man folgende Funktion verwenden.

Position eines Elementes ermitteln

Die Position und die Maße eines HTML Elementes, lassen sich mit folgender Funktion bestimmen:

Wie kann man alle Einträge aller Selectfelder wählen?

Folgende Funktion selektiert alle Einträge, in allen Formularen einer Seite. Der praktische Nutzen mag gering sein, aber hier geht es nur um die Umsetzung der Fragestellung, die in der entsprechenden Anwendung jeweils angepaß?t werden muss.

Text in Textarea einfügen

Text an der Cursorposition einfügen können nur der IE ab Version 5 und Mozilla Browser. Opera bleibt aussen vor. Wie es bei Mac und Linux Browsern aussieht, weiß ich nicht.

Mit dem Skript, können z.b. BBCode Tags eingefügt werden oder Smilies. Das Skript sieht so aus:

function insert(input, aTag, eTag) {

    input.focus();

    if(!aTag) return;

    if(!eTag) eTag = '';

    if(typeof document.selection != 'undefined')     {

         var range = document.selection.createRange();

         var insText = range.text;

         if(!insText && eTag) return alert('Nichts markiert!');

         range.text = aTag + insText + eTag;

         range = document.selection.createRange();

         if (insText.length == 0)  range.move('character', -eTag.length);

         else  range.moveStart('character', aTag.length + insText.length + eTag.length);

         range.select();

    } else if(typeof input.selectionStart != 'undefined') {

         var start = input.selectionStart;

         var end = input.selectionEnd;

         var insText = input.value.substring(start, end);

         if(!insText && eTag) return alert('Nichts markiert!');

         input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);

         var pos;

         if (insText.length == 0)  pos = start + aTag.length;

         else pos = start + aTag.length + insText.length + eTag.length;

         input.selectionStart = pos;

         input.selectionEnd = pos;

    } else {

         alert('Du kannst nach Hause gehen!\n\nLeider unterstützt dein Browser nicht die notwendige Funktion!');

    }

}

Das Skript ist eine leicht abgewandelte Form von dem Beispiel bei selfhtml

Beispiel

doppelte Array Einträge entfernen

Doppelte Einträge in einem Array lassen sich am effektivsten über ein Objekt entfernen. Der Trick dabei ist, das ein Objektattribut nicht doppelt vorkommen kann und somit ist ein Attribut, dass mehrmals zugewiesen wird nur einmal vorhanden.

Die Umsetzung erfolgt über Array.prototype dann läßt sich diese Funktion auf jedes Array anwenden.

Der Code sieht folgendermaßen aus:

Array.prototype.unique = function() {

    var o = {};

    var tmp = [];

    for(var i = 0 ; i < this.length; i++) o[this[i]] = true;

    for(var i in o) tmp[tmp.length] = i;

    return tmp;

}

Und der Test: Klick

Server mit Javascript prüfen

Kann man einen Server mit JS prüfen?

Ja, das geht, wenn man die URL eines Bildes auf dem Server kennt. Dazu kann man den onload bzw. onerror Eventhandler des Image Objektes benutzen, die Funktion könnte so aussehen:

function check(url) {

    if(!url || !document.images) return

    var img = new Image();

    img.onload = function () {

         alert('Das Bild konnte geladen werden der Server ist online!');

         document.images[testBild].src = this.src;

    };

    img.onerror = function () {

         alert('Das Bild konnte nicht geladen werden!');

         document.images[testbild].src = this.src + '?' + Math.random();

    }

    img.src = url;

}

Mit Hilfe von Math.random() wird bei jedem Aufruf eine neue URL erstellt, damit die Datei immer vom Server geholt wird und nicht aus dem Cache des Browsers.

Es läßt sich aber auch direkt in ein Bild im HTML Code integrieren, z.b. so:

<img src="http://server.lt/online.gif"

onerror="if(!this.check) {this.check = true; this.src = 'offline.gif';}"

alt ="">

Beispiel

Datum prüfen

Beschreibung

Um ein Datum auf Gültigkeit zu prüfen muss die Eingabe zuerst zerlegt werden. Die Funktion string2date() geht von der typisch deutschen Form TT.MM.JJJJ aus, wobei die Trennzeichen auch ein Minuszeichen oder Schrägstrich sein können.

Die Eingabe wird an den Trennzeichen gesplittet und daraus dann ein Date() Objekt erstellt. Als nächstes wird der Tag, Monat und das Jahr mit der Eingabe verglichen, stimmen alle Werte überein, wird das Date Objekt zurückgegeben, wenn nicht null

Der Code

///////////////////////////////////////////////////////////

//

// string2date(string)

//

// string => TT.MM.YYYY HH:MM:SS

// Das Trennzeichen kann ein: "./-" sein

// prüft einen String auf ein gültiges Datum

// gibt ein Datum Objekt oder null zurück

function string2date(string) {

    if(!string) return null;

    string += '';

    string = string.replace(/[-\/]/g, '.'); // Trennzeichen normalisieren

    string = string.replace(/[^0-9.: ]/g, ''); // ungültige Zeichen entfernen

    string = string.replace(/ +/g, ' '); // doppelte Leerzeichen entfernen

    var uhr = string.split(" "); // Uhrzeit abtrennen

    var split = uhr[0].split(".");

    var day = parseInt(split[0], 10);

    var month = parseInt(split[1] || 0, 10);

    var year = parseInt(split[2] || 0, 10);

    if(isNaN(year)) year = getFullYear();

    var check = new Date(year, month - 1, day);

    if(uhr[1]) {

         var uhr = uhr[1].split(':');

         check.setHours( uhr[0] || 0 );

         check.setMinutes( uhr[1] || 0 );

         check.setSeconds( uhr[2] || 0 );

    }

    var day2 = check.getDate();

    var year2 = getFullYear(check);

    var month2 = check.getMonth() + 1;

    return ( year2 == year && month == month2 && day == day2 ) ? check

    : null;

}

function getFullYear(date){

    if(!date) date = new Date();

    if(typeof date.getFullYear != 'undefined') return date.getFullYear();

    var year = date.getYear();

    if(year < 1000) year += 2000;

    return year;

}

Beispiel

Zahlen formatieren

Die folgende Funktion formatiert Zahlen.

function formatZahl(zahl, k, fix) {

    if(!k) k = 0;

    var neu = '';

	var dec_point = '.';

	var thousands_sep = ',';

    // Runden

    var f = Math.pow(10, k);

    zahl = '' + parseInt(zahl * f + (.5 * (zahl > 0 ? 1 : -1)) ) / f ;

    // Komma ermittlen

    var idx = zahl.indexOf('.');

    // fehlende Nullen einfügen

    if(fix)    {

         zahl += (idx == -1 ? '.' : '' )

         + f.toString().substring(1);

    }

	var sign = zahl < 0;

	if(sign) zahl = zahl.substring(1);

    idx = zahl.indexOf('.');

	// Nachkommastellen ermittlen

    if( idx == -1) idx = zahl.length;

    else neu = dec_point + zahl.substr(idx + 1, k);

    while(idx > 0)    {

        if(idx - 3 > 0)

        neu = thousands_sep + zahl.substring( idx - 3, idx) + neu;

        else

        neu = zahl.substring(0, idx) + neu;

        idx -= 3;

    }

    return (sign ? '-' : '') + neu;

}

Wie kann ich alle HTML Tags entfernen?

Die Funktion stripHTML() löscht alle HTML Tags in einem String.

Die Funktion stripHTML() wurde am 21.7.2010 überarbeitetet. Sie ist nun in der Lage auch mit HTML Tags umzugehen, die HTML Zeichen in den Attributen haben. Also z.b. so etwas: <p title="Ich bin kleiner < als der größere >">, was in der vorherigen Version nicht möglich war, wie schon Christoph in den Kommentaren schrieb.

function stripHTML(str){

	// remove all string within tags

	var tmp = str.replace(/(<.*['"])([^'"]*)(['"]>)/g, 

	function(x, p1, p2, p3) { return  p1 + p3;}

	);

	// now remove the tags

	return tmp.replace(/<\/?[^>]+>/gi, '');

};

stripHTML() in der Version vom 21.7.2010

Die Funktion trim() löscht alle Zeilenumbrüche, Leerzeichen am Anfang und Ende und doppelten Leerzeichen.

function trim (str) {

    return str.replace(/[\n\r]/g, '').replace(/ +/g, ' ').replace(/^\s+/g, '').replace(/\s+$/g, '');

}

Test

Checkboxen auf einmal markieren

Es sollen mit Hilfe einer Checkbox, alle Checkboxen einer bestimmten Gruppe auf einmal markiert werden.

Das Formular

Das Formular dazu sieht so aus:

Ich verwende für die Checkboxen Namen, die in PHP üblich sind um Elemente als Array abzufragen.

Der HTML Quellcode:

<form action="#">

<p><input type="checkbox" name="loeschen[]"> box 1<br>

<input type="checkbox" name="loeschen[]"> box 2<br>

<input type="checkbox" name="loeschen[]"> box 3<br>

<input type="checkbox" name="loeschen[]"> box 4<br>

<input type="checkbox" name="loeschen[]"> box 5<br>

<p>

<input onclick="check_all('loeschen[]', this)" type="checkbox"> Alle

</form>

JS Quellcode

Der Quellcode ist relativ simpel:

function check_all(name, el){

     if(!el || !el.form) return alert('falscher Parameter');

     var box = el.form.elements[name];

     if(!box) return alert(name + ' existiert nicht!');

     for(var i = 0; i < box.length; i++)  box[i].checked = el.checked;

}