Zeilenumbruch in Textarea generieren?

DataFox

DataFox

Erfahrenes Mitglied
Hallo

ich manipuliere den value einer Textarea, und möchte dort am Ende Zeilenumbrüche erzeugen.

Dummerweise klappt das hier nicht:

Code: 
textareaObj.value = textareaObj.value + String.fromCharCode(13);

Beim ersten mal kommt nur ein "Leerzeichen".

Code: 
textareaObj.value = textareaObj.value + String.fromCharCode(13);
textareaObj.value = textareaObj.value + String.fromCharCode(13);

Wenn ich das zweimal mache, habe ich endlich den Zeilenumbruch. Dann aber mit einem Leerzeichen davor. Echt dumm.

Hat jemand eine idee wie ein richtiger Zeilenumbruch rein gebrezelt werden kann?

Gruß
Laura
 
Ja, funktioniert nicht :-(

Auch \r\n funktioniert nicht.

Um das Beispiel zu komplettieren, die sache ist etwas komplexer:

Ich fange in der Textarea onkeydown die Tastatureingaben ab. Eine (ziemlich große) Funktion ermittelt den keyCode, und wenn es sich um ein ENTER handelt, also keyCode==13, dann wird eine charSequence ermittelt bzw. die Range. Also der Ort, wo die letzte Editierung statt fand, sprich der "markierte Bereich" (was markiert wurde, kann man ja feststellen. Und wenn nichts markiert wurde, ist es einfach die Cursorposition im Text).
Wie auch immer, die Funktion bringt an einer Stelle einen bestimmten String in die Textarea, und damit das funktioniet muss sie return false; zurück geben. So nimmt die Textarea das eigentliche eigegebene Zeichen der Tastatur nicht an. Im Fall des ENTER's soll nach dem Code aber ein ENTER erfolgen.

Es verhält sich sehr merkwürdig: Wenn ich \n oder \n\r nehme, bekomme ich sichtbar zunächst ein "Leerzeichen". Sobald ich dann aber irgend etwas tippe, bricht der Text um. Die nächste Zeile hat dann aber ein "Leerzeichen" als erstes Zeichen. Zumundest sieht es nach einem Leerzeichen aus. Es ist aber kein normales, muss irgend etwas anderes sein...

Gruß
Laura
 
Hi,

was du mit
Code: 
fromCharCode(13)
einfügst, entspricht einem Wagenrücklauf (carriage return). Es simuliert in keiner Weise die Enter-Taste, falls das dein Vorhaben sein sollte.

Was bei mir funktioniert:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
function theArea(objEvent, objArea){
  var intKeyCode = (window.event)? window.event.keyCode : objEvent.which;

  if(intKeyCode == 13){
    var intPos = getCursorPos(objArea);
    textareaObj.value = textareaObj.value.substring(0, intPos)
                        + " (Neuer Inhalt an Position: " + intPos + ") "
                        + ((document.all && !window.opera)?String.fromCharCode(13):"") + String.fromCharCode(10)
                        + textareaObj.value.substr(intPos, textareaObj.value.length);
  }

  return false;
}

function getCursorPos(objArea){
  var intCursorPos = -1;

  // Falls es sich um einen IE handelt
  if (document.selection && !window.opera){
    // Evtl. markierten Text holen
    var strText = document.selection.createRange().text;
    // Fokus auf Textarea
    objArea.focus();

    // Gewählten Area-Inhalt selektieren bzw. Cursorposition selektieren (=> Selektion)
    var objRange = document.selection.createRange();
    var objFirstRange = document.selection.createRange();
    objFirstRange.collapse(true);

    // Setzt das Objekt auf den Text der TextArea -> objRange enthält den gesamten Text der Area
    objRange.moveToElementText(objArea);
    // Dem Startpunkt von objFirstRange wird der Startpunkt des gesamten Area-Textes zugewiesen
    objFirstRange.setEndPoint("StartToStart", objRange);

    intCursorPos = objFirstRange.text.length;
  }else{
    // Textlänge in Area ermitteln
    var selLength = objArea.textLength;
    // Beginn einer eventuellen Markierung ermitteln
    intCursorPos = objArea.selectionStart;
  }

  return intCursorPos;
}
 //-->
</script>
</head>
<body>
<textarea id="textareaObj" cols="40" rows="10" onkeydown="return theArea(event, this);">Ich bin Zeile 1
Ich bin Zeile 2
Ich bin Zeile 3, die etwas mehr Länge hat als allen anderen, um zu testen, ob der Zeilenzähler auch funktioniert</textarea>
</body>
</html>
Vielleicht hilft dir das weiter.

Ciao
Quaese
 
Hi,

also wenn ich das richtig verstehe, erzeugt folgendes einen echten Umbruch:

Code: 
((document.all && !window.opera)?String.fromCharCode(13):'') + String.fromCharCode(10);

Leider bleibt das Problem weiterhin bestehen.
Hier mal mein Code, als Beispiel:

Code: 
<html>
<head>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>

<textarea id="textareaObj" cols="90" rows="30" onkeydown="return makeEnter(event, this);">

<script type="text/javascript">
	function makeEnter(eo,e) {
		var key = e.which ? e.which : e.keyCode;
		if(key == 13) { //Enter gedrückt
			specialEnter(eo);
			return false;
		}
	}

	function specialEnter(input) {
		if(input.setSelectionRange) {
			alert('?');
		} else if(document.selection) {
			var range = document.selection.createRange();
			if(range.parentElement() == input) {
				var isCollapsed = range.text == '';
				range.text = 'NEUE ZEILE:' + ((document.all && !window.opera)?String.fromCharCode(13):'') + String.fromCharCode(10);
			}
		}
	}

</script>
</body>
</html>

Das merkwürdige daran: Wenn der Cursor ganz am Anfang einer Zeile steht, ist alles normal. "NEUE ZEILE:" steht dann schön unterienander, wenn 10x die Enter-Taste gedrückt wird. Aber dann schreib mal irgendwas, und bringe den Cursor in Textmitte. Irgendwo rein. Und Enter! Dann kommt dieses äußerst merkwürdige Phänomen. Nach "NEUE ZEILE:" kommt ein sichtbares "Leerzeichen", das aber keins ist! Wird hinter diesem Leerzeichen dann irgend etwas geschrieben, springt das Ding um, wie als hätte man Enter gedrückt. In der nächsten Zeile steht das "Leerzeichen" dann vor dem Text, als wäre er eingerückt. Zeilenumbrüche scheinen wohl mehrteilig zu sein,... echt merkwürdig! Bin da mit meinem Latein ziemlich am Ende...

Getestet im IE6. Für Firefox ist der Code noch nicht geschrieben.

Gruß
Laura
 
Moin Laura,

Vielleicht mal ein anderer Gedanke:

Du willst, wenn [ENTER] gedrückt wird, keinen Zeilenumbruch, sondern einen bestimmten String im TextRange einfügen, und erst danach einen Zeilenumbruch?

Falls ich das so richtig verstanden habe, füge nur den Code an der Stelle ein(und keine Steuerzeichen), und lasse die Funktion true zurückgeben...der Zeilenumbruch kommt dann wie immer von der Enter-Taste und macht keine Probleme(wo die in diesem Beispiel liegen, kann ich dir allerdings auch nicht sagen:))
 
Hi,

die Lösung scheint ja einfach zu sein ;-) habe es natürlich gleich ausprobiert. Erst dachte ich, super, es funktioniert! Aber dann..: Ab und zu (!) passiert es, das der Text nicht dort eingefügt wird wo der Cursor war. Sondern erst der Zeilenumbruch, dann der Text.

Wenn man ganz am Ende einer Zeile Enter drückt, erscheint der Text besonders gerne in der nächsten Zeile. Und dann wird es kurios: In der nächsten Zeile erfolgt kein Umbruch, sondern der Text scheint der Zeile vorangestellt zu werden. Ab und zu.

Also was ich damit ursprünglich bezweckt habe war eine Textarea zum Code eingeben, die schlau ist. Ein Kumpel von mir hat da so ne Seite wo man Programmschnippsel eintragen kann. Eine normale Textarea erlaubt ja z.B. keine Einrückungen. Die gehen mittlerweile! Nun wollte ich das aber so haben, das wenn ich nach einer Zeile Enter drücke, automatisch geschaut wird um wieviele Tabs die vorhergehende Zeile eingerückt war, und dann entsprechend automatisch genauso viele Tabs voranstellen, damit man sich nicht einen Wolf tippt. So wie die guten Editoren es auch automatisch machen.

Denke das in diesem Fall hier manchmal das Enter schneller in die Textarea kommt als die Funktion die Range ermittelt und den Text rein hängt... :-/

Gruß
Laura
 
DataFox hat gesagt.:
Denke das in diesem Fall hier manchmal das Enter schneller in die Textarea kommt als die Funktion die Range ermittelt und den Text rein hängt... :-/

Gruß
Laura
Zum Vergrößern anklicken....

Das kann eigentlich nicht sein, der Tastendruck sollte in jedem Fall erst umgesetzt werden, wenn die Funktionen beendet sind, denn erst dann ist der Rückgabewert verfügbar.

Zeige mal bitte den Code, wie du ihn jetzt hast.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück