HTML Eine TextArea mit vordefiniertem Text

[Cr41s3]

Hey.

Ich würde gerne eine <textarea> erstellen mit Text, welchen man editieren kann.
Den Text rein zu bekommen ist nicht das Problem, aber, wenn man auf die textarea klickt, dann leert sich das Feld.

Jemand eine Idee?

MfG-

 

[Smartass]

Jeditable - Edit In Place

Smartass

 

[Yuuri]

Jemand eine Idee?

Ja nenn uns mehr Details. Das Verhalten entspricht nicht dem Standard.

 

[Cr41s3]

Soll zum editieren eines Textes sein, habe alles fertig, nur das bearbeiten ohne den Text neu zu schreiben geht nicht.

 

[nbzklr]

Verstehe ich nicht ganz?!

<textarea>dein text</textarea>

und fertig! Alternativ:

<div contenteditable="true">dein text</div>

 

[Kausalat]

Wie Yuuri bereits erwähnt hat, sollte ein vorgegebener Text in einer Textarea nicht gelöscht werden, wenn man hineinklickt. Vergleiche mit meinem Beispiel.

 

[Cr41s3]

Okey @Kausalt dein Beispiel geht im Browser, aber im Script nicht.

Hier meine textarea

<textarea rows="4" cols="50" id="editnews" value="28"></textarea>

Lag daran, dass ich den content per javascript hinzugefügt habe, geht nun.
Danke

MfG-

 

[Kausalat]

Beachte, dass Texareas per Definition kein "value"-Attribut wie z. B. Inputs haben, sondern der Inhalt zwischen den <textarea>-Tags liegt (Ausnahme: der beim Klick zu löschende Inhalt des optionalen "placeholder"-Attributs).

 

[Cr41s3]

Die value wollte ich erst benutzen zum übermitteln der ID, aber das geht ja eh nicht das stimmt.
Aber funktioniert ja nun alles.

 

[Yuuri]

Die value wollte ich erst benutzen zum übermitteln der ID, aber das geht ja eh nicht das stimmt.

<textarea rows="4" cols="50" name="editnews[28]"></textarea>
<textarea rows="4" cols="50" name="editnews[5]"></textarea>
<textarea rows="4" cols="50" name="editnews[10]"></textarea>

So wärs richtig. In PHP bspw. kommt dann ein Array mit den Werten

[
  editnews => [
    28 => "abcdef text",
    5 => "..."
    10 => "..."
  ]
]

an.

Aber für mehr Hilfe: Gib uns mehr Infos...

 

[Cr41s3]

Hat sich erledigt.
DIe Daten werden eh mit jQuery und AJAX verarbeitet.
Aber kann ich mehrere Daten in z.B. die value oder id eines button packen?

 

[Yuuri]

Nein

 

[ITrun90]

Dafür gibt es die Data properties

 

[mambokurt]

Hat sich erledigt.
DIe Daten werden eh mit jQuery und AJAX verarbeitet.
Aber kann ich mehrere Daten in z.B. die value oder id eines button packen?

Jein:

<button id="nudelsalat_123_345" />

, dann kannst du den Wert aus der id in PHP per explode() bzw in Javascript per split() am Unterstrich auseinander nehmen. Setzt natürlich vorraus dass in den Daten dein Trennzeichen(/Unterstirch) never ever enthalten sein kann.

 

[Yuuri]

@ mambokurt: Ist aber sehr sehr sehr umständlich. IDs sind einzigartig und sollten auch nur einfache Zeichen enthalten bzw. der Funktionalität nach benannt werden. Für ne lockerere und mehrfache Deklaration, kann man sich die Klassen zunutze machen. Für weitere Sachen, die nicht das HTML beeinflussen soll, wurden mit HTML 5 die Data-Attribute eingeführt. Ein wunderbarer Weg, um zusätzliche Infos einem Node mitzugeben, welches man in JS wunderbar nutzen kann.

<button class="delete" data-id="5">abc</button>
<button class="delete" data-id="6">def</button>
<button class="delete" data-id="7">ghi</button>
<button class="delete" data-id="8">jkl</button>
<!-- ... -->

Genau dafür wurden die Dinger geschaffen. Mittels CSS 3 kann man die ggf. auch wunderbar stylen:

button.delete[data-id="5"] { background: red; }
button.delete[data-id="6"] { background: blue; }
button.delete[data-id="7"] { background: green; }
button.delete[data-id="8"] { background: yellow; }

Die Data-Attribute nutz ich selbst auch gern, um das Rendering von Einträgen in einer select2-Box zu steuern. Da kommt dann ein data-render="Multiline" o.ä. rein, damit der Content entsprechend meinen Vorgaben aussieht.

// JS

$.fn.select2.modcallbacks = {};
$.fn.select2.moddefaults = {
	// ...
	formatResult:    function( Item, Container, Query )
	{
		var el = $( Item.element[0] ),
			rendercb = el.parent().data( 'render' );
		if( rendercb != undefined && $.fn.select2.modcallbacks[rendercb] )
		{
			return $.fn.select2.modcallbacks[rendercb]( Item, el.data(), Query, Container );
		}
		return Item.text;
	},
	// ...
};

$.fn.select2.modcallbacks['Multiline'] = function( Item, Data, Query, Container )
{
	return [
		'<div>' +
		($( Item.element[0] ).data( 'format' ) ? $( Item.element[0] ).data( 'format' ) : Item.text) +
		'</div>'
	].join( '' );
};

// HTML

<select data-render="Multiline">
	<option ...>...</option>
	...
</select>

Bspw. Aufgerufen wird alles über

$('select').select2mod();

Und der Rest ist mir egal. Man kann das System wunderbar erweitern, es ist einfach zu pflegen, einfach zu unterscheiden, der HTML-Content bleibt unberührt, ...