Hallo, ich weiß - es ist ein komisches Topic, was ich da eingegeben habe, aber ich weiß nicht, wie ich es anders beschreiben soll Ich habe eine Maske, in der ich Text eingebe und die dann in eine Datenbank abgespeichert wird. Den Text kann man via BB-Code formatieren. Dafür habe ich folgenden Code verwendet:

HTML-Code:

<a href="#" onClick="insert('[b]', '[/b]')" class="bold">Bold</a>
	<a href="#" onClick="insert('[i]', '[/i]')" class="italic">Italic</a>
    <a href="#" onClick="insert('[UP]', '[/UP]')" class="uppercase">UPPER</a>
	<a href="#" onClick="insert('[u]', '[/u]')" class="underline">Underline</a>
	<a href="#" onClick="insert('[url=]', '[/url]')">Hyperlink</a>
	<a href="#">Color<span><img src="img/grau.png" onClick="insert('[color=#9e9e9e]', '[/color]')" /><img src="img/gruen.gif" onClick="insert('[color=#cdfa2e]', '[/color]')" /></span></a>

die Javascript-Datei sieht wie folgt aus:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

function insert(aTag, eTag) {   var input = document.forms['editor'].elements['text'];   input.focus();   if(typeof document.selection != 'undefined') {     var range = document.selection.createRange();     var insText = range.text;     range.text = aTag + insText + eTag;     range = document.selection.createRange();     if (insText.length == 0) {       range.move('character', aTag.length + insText.length + 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);     input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);     var pos;     if (insText.length == 0) {       pos = start + aTag.length + insText.length + eTag.length;     } else {       pos = start + aTag.length + insText.length + eTag.length;     }     input.selectionStart = pos;     input.selectionEnd = pos;   }   else   {     var pos;     var re = new RegExp('^[0-9]{0,3}$');     while(!re.test(pos)) {       pos = prompt("Einfügen an Position (0.." + input.value.length + "):", "0");     }     if(pos > input.value.length) {       pos = input.value.length;     }     var insText = prompt("Bitte geben Sie den zu formatierenden Text ein:");     input.value = input.value.substr(0, pos) + aTag + insText + eTag + input.value.substr(pos);   } }

Es klappt auch alles wunderbar. Aber wenn ich auf einen Button klicke wie bsplw. BOLD, dann scrollt die Seite automatisch nach oben?! Die Textarea befindet sich relativ weit unten auf der Seite - man muss also runterscrollen um sie zu sehen. Wenn man dann den Text eingibt und ihn gegebenfalls formatieren will mit den Buttons, springt die Seite automatisch ganz nach oben und ich weiß nicht warum? Wie kann man diesen Bug beheben?

Vielen Dank für Anregungen.

Grüße aus Köln

Hi,

Zitat von nordi

Es klappt auch alles wunderbar. Aber wenn ich auf einen Button klicke wie bsplw. BOLD, dann scrollt die Seite automatisch nach oben?! Die Textarea befindet sich relativ weit unten auf der Seite - man muss also runterscrollen um sie zu sehen. Wenn man dann den Text eingibt und ihn gegebenfalls formatieren will mit den Buttons, springt die Seite automatisch ganz nach oben und ich weiß nicht warum? Wie kann man diesen Bug beheben?

Vielen Dank für Anregungen.

Code :

1	<a href="#" onclick="insert('[noparse][b][/noparse]', '[noparse][/b][/noparse]')[b]; return false;[/b]" class="bold">Bold</a>

"return false" bewirkt, dass der Browser das Verweisziel im href-Attribut nicht aufruft, das einem Anker (ohne Ankername) entspricht, weshalb er an den Seitenanfang springt.

Denkbar ist hier auch die Vergabe eines Ankernamens, der im Dokument überhaupt nicht existiert:

Code :

1	<a href="#[b]nogo[/b]" onclick="insert('[noparse][b][/noparse]', '[noparse][/b][/noparse]')[b]" class="bold">Bold</a>

Die Event-Handler werden übrigens durchgängig kleingeschrieben.

mfg Maik

Zitat von Maik

Die Event-Handler werden übrigens durchgängig kleingeschrieben.

Wirklich? Ich dachte HTML-Attribute kann man schreiben wie man möchte?

Zitat von Nord-Süd-Richtung

Wirklich? Ich dachte HTML-Attribute kann man schreiben wie man möchte?

Ich halte mich da an die Schreibweise in der offiziellen Spezifikation http://www.edition-w3.de/TR/1999/REC...ttributes.html

Und in XHTML erzeugt nordis Schreibweise eine Validator-Fehlermeldung:

there is no attribute "onClick"

Unterschied: Kleinschreibung.

mfg Maik

Moin,

sauberste Lösung: lasse das href-Attribut weg, wenn du es nicht benötigst.
Den einzigen Zweck, den es bei dir erfüllt, ist das Erzeugen des pointer-Cursors, und sowas geht auch per CSS.

Zitat von Sven Mintel

Den einzigen Zweck, den es bei dir erfüllt, ist das Erzeugen des pointer-Cursors, und sowas geht auch per CSS.

Code css:

1	a { cursor:pointer; }

mfg Maik

Hi, super! Das Springen der Seite nach oben ist nun behoben. Wenn man nun aber einen längeren Text in die Textarea eingibt und dann einen Button zur Formatierung klickt, springt der Cursor innerhalb der Textarea ganz nach oben?! Das war übrigens auch schon vorher der Fall, hatte ich vergessen zu erwähnen. Worauf kann das liegen?