BB-Code Buttons - Seite scrollt?

nordi

nordi

Erfahrenes Mitglied
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: 
<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: 
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,
nordi hat gesagt.:
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.
Zum Vergrößern anklicken....
Code: 
<a href="#" onclick="insert('[ plain][ /plain]', '[ plain][ /plain]'); return false;" 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: 
<a href="#nogo" onclick="insert('[ plain][ /plain]', '[ plain][ /plain]')[b]" class="bold">Bold</a>


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

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.
 
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?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück