✔ Text mit JS klickbar machen

[NinaJS]

Hallo!

Ich habe ff. Problem:
Drei Textteile (jeweils mit <p class="editable">) sollen angeklickt werden können und dann in eine Box "rutschen", in der man den Text dann redigeren kann.

Meine Hauptfrage ist nun, wie kann ich den Text klickbar machen (mit JavaScript) und welches Element benötige ich, um die Box in JavaScript zu schaffen? Ist das <input>?

Gruss
NinaJS

 

[tombe]

So gehts:

<script language="javascript" type="text/javascript">
var id = "";
function edittext(pid) {
	id = pid;
	document.getElementById("edit").value = document.getElementById(id).innerHTML;
}

function fertig() {
	if (id == "") return false;
	document.getElementById(id).innerHTML = document.getElementById("edit").value;
}
</script>

<p class="editable" id="p1" onclick="edittext(this.id)">Text 1</p>
<p class="editable" id="p2" onclick="edittext(this.id)">Text 2</p>
<p class="editable" id="p3" onclick="edittext(this.id)">Text 3</p>
<input type="text" name="text1" id="edit" value="" size="20" />
<input type="button" name="edit" value="Fertig" onclick="fertig()"/>

Wenn du anstatt Javascript auch mit jQuery arbeiten kannst könnte man es noch "schöner" lösen.

 

[jeipack]

have fun

$("[name=editable]").dblclick(function() {

	doDblClick(this);
});


//Beim Doppelklick wird ein Input Feld angezeigt.
//Der Doppelklick Event wird entfernt und dafür auf das Input Feld ein Change Event gelegt.
//Wird das Inputfeld gechanged, wird wieder der Doppelklick Event angehängt.
function doDblClick(obj) {
	saved=false;

	//$(obj).html("<input type=\"text\" value=\"" + $(obj).html() + "\" class=\"editor\">");
	$(obj).html("<textarea class=\"editor\">" + $(obj).html().replace(/<br>/g,"\r\n") + "</textarea>");
	$(obj).off("dblclick");
	
	$(obj).children("[class=editor]").change(function() {
		

		$(this).off("change");
		$(this).off("keydown");
		$(this).parent().dblclick(function() {
			doDblClick($(this));
		});
		$(this).parent().html($(this).val().replace(/\r\n|\r|\n/g,"<br>"));
		
	});
	
	//Wenn es kein Change gibt und nur Enter gedrückt wird soll das Inputfeld auch verschwinden
	//Aber nur, wenn nicht gleichzeitig Shift geklickt wird
	$(obj).children("[class=editor]").keydown(function(e) {
		//Enter pressed
		if(e.keyCode == 13&&e.shiftKey==false) {
			e.preventDefault();
			$(this).off("change");
			$(this).off("keydown");
			$(this).parent().dblclick(function() {
				doDblClick($(this));
			});
			$(this).parent().html($(this).val().replace(/\r\n|\r|\n/g,"<br>"));
			return false;
		}
	});
	


	$(obj).children("[class=editor]").focus();
	
	
}