Få div att bli textarea?

[Jesper T]

<div id="edit">Textmassa</div>
vill jag med en enkel knapptryckning skall förvandla sig till:
<textarea>Textmassa</textarea>
och viseversa.

[nitro2k01]

För IE kan du använda contenteditable: [kod]<div id="edit"

contenteditable="true">Textmassa</div>

I javascript borde något av dessa funka(orkar inte testa)

document.getElementById("edit").contentEditable = true;   // Alt. false
document.getElementById("edit").contenteditable = true;   // Alt. false

[Jesper T]

Nej, inte contentEditable (usch..), jag menar textarea.

[nitro2k01]

Med reservation för buggar etc eftersom det är skrivet på stående fot. Dessutom helt IE-specifikt (?)

 
<script language="text/javascript"><!--
function switchEdit2(ename){
   var newtag = (document.getElementById(ename).tagName.toLowerCase()=="textarea")?"div": "textarea";
   document.getElementById(ename).outerHTML = "<" + newtag + "id=\"" + ename + "\">" + document.getElementById(ename).innerText + "</" + newtag +">";
}


function switchEdit(ename){
  document.getElementById(ename).tagName = (document.getElementById(ename).tagName.toLowerCase()=="textarea")?"div": "textarea";
}


//--></script>
<div id="edit"> Foobar </div>
<a href="javascript:switchEdit('edit');">Byt metod 1</a>
 - <a href="javascript:switchEdit2('edit');">Byt metod 2</a>

[Jesper T]

Fortfarande I.E. men det verkar funka

<SCRIPT>
function replaceElement()
{   
    var oChild=Div1.children(0);	
    var sInnerHTML = oChild.innerHTML;
    if (oChild.tagName.toLowerCase()=="textarea")
    {
        oNewChild=document.createElement("div");
        Div1.replaceChild(oNewChild, oChild);
        oNewChild.innerHTML=sInnerHTML
    }
    else
    {
        oNewChild=document.createElement("textarea");
        Div1.replaceChild(oNewChild, oChild);
        oNewChild.innerHTML=sInnerHTML		
    }
}
</SCRIPT>


<DIV ID=Div1>
<div>Textmassor</div>
</DIV>
<button onclick="replaceElement()">Toggle!</button>

nitro2k01: fick aldrig din variant/varianter att funka. Tack ändå.

[Peter S]

En mer kompatibel variant:

function switchElm() {
    var mElm = document.getElementById("holder"),
	cElm = (function (){
	    var nodes = mElm.childNodes,
		iLen = nodes.length;
	    for (var i = 0; i < iLen; ++i)
		if (nodes[i].nodeType == 1) return nodes[i];
	    return 0;
	})(),
        nElm;

    if (cElm == 0) return;

    switch (cElm.nodeName.toLowerCase()) {
	case "div":
	{
	    nElm = document.createElement("textarea");
	    nElm.value = cElm.innerHTML;
	} break;

	case "textarea":
	{
	    nElm = document.createElement("div");
	    nElm.innerHTML = cElm.value;
	} break;

	default: return;
    }

    mElm.replaceChild(nElm, cElm);
}

...

<div id="holder">
    <div>Textmassa</div>
</div>
<button type="button" onclick="switchElm()">Switch</button>

[Jesper T]

Varför måste man ha en div runt om igentligen? (holder)
Varför kan man inte bara döpa denna (<div id="något id">Textmassa</div>) ?

[Peter S]

Det blir enklare att referera till det aktuella elementet. Visst kan man ta bort "behållaren", men då blir det mer komplicerat att hitta noden. Det är alltså bara en bekvämlighetssak

BTW: Jag har modifierat ovanstående kod en smula.

[Jesper T]

Tycker att det borde vara mer komplicerat (enligt min logik) att först skapa en behållare om man kan referera direkt till ex. ett id.