---
title: "Få div att bli textarea?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/102919-få-div-att-bli-textarea"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Jesper T"
published: "2004-05-04T16:00:50.000Z"
updated: "2004-05-04T19:42:42.000Z"
replies: 8
views: 363
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/102919-få-div-att-bli-textarea"
---

# Få div att bli textarea?

## #1 — Jesper T, 2004-05-04T16:00Z

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

Permalänk: https://www.webforum.nu/p/102919

## #2 — nitro2k01, 2004-05-04T16:22Z

För IE kan du använda contenteditable: 

```
<div id="edit" [kod]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
```

Permalänk: https://www.webforum.nu/p/1338121

## #3 — Jesper T, 2004-05-04T16:27Z

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

Permalänk: https://www.webforum.nu/p/1338128

## #4 — nitro2k01, 2004-05-04T16:38Z

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>
```

Permalänk: https://www.webforum.nu/p/1338142

## #5 — Jesper T, 2004-05-04T17:07Z

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å.

Permalänk: https://www.webforum.nu/p/1338159

## #6 — Peter S, 2004-05-04T17:47Z

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>
```

 :)

Permalänk: https://www.webforum.nu/p/1338171

## #7 — Jesper T, 2004-05-04T19:08Z

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\>) ?

Permalänk: https://www.webforum.nu/p/1338234

## #8 — Peter S, 2004-05-04T19:30Z

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.

 :)

Permalänk: https://www.webforum.nu/p/1338253

## #9 — Jesper T, 2004-05-04T19:42Z

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.

Permalänk: https://www.webforum.nu/p/1338262

---

Tråden på webben: https://www.webforum.nu/amne/javascript/102919-få-div-att-bli-textarea