Sette inn en redigerbar regionen til et Div

Textarea kontroller, i motsetning til vanlige tekstbokser, gi brukerne rom for å legge inn store mengder data til redigerbare områder på en webside. Disse kontrollene er spesielt nyttig på sider som godtar notater og kommentarer. Du trenger ikke å legge textareas når du koden websidene. Bare å sette inn disse redigerbare områder når det trengs ved å legge dem til eksisterende div-elementer.

Bruksanvisning

1 Åpne et HTML-dokument ved hjelp av en Notepad eller en HTML-editor.

2 Lim inn følgende kode i dokumentet "body" -delen:

<Div id = "testDiv">

<Input type = "button" value = "Sett inn VK" onclick = "return InsertToDiv ( 'testDiv')" />

Dette skaper en tom div og en knapp som kaller en Javascript-funksjonen når du klikker. Knappen klikk arrangement passerer div id verdi til denne funksjonen.

3 Legg inn koden nedenfor i dokumentet "script" -delen:

Var rader = 10;

Var kolonner = 40;

funksjon insertToDiv (divIDvalue) {

Var divObject = document.getElementById (divIDvalue);

Var textarea = document.createElement ( "textarea");

textarea.setAttribute ( "rader", rader);

textarea.setAttribute ( "kolonner", Cols);

divObject.appendChild (textarea);

}

</ Script>

Denne funksjonen lager en ny tekstfelt ved hjelp av "createElement" metoden. Funksjonen legger deretter textarea kontrollen til div bruke "appendChild" metoden. Legg merke til de variablene som heter "rader" og "kolonner" på toppen av koden blokken. Verdiene "10" og "40" bestemme antall rader og kolonner som vises i tekstfeltet.

4 Lagre HTML-dokumentet og vise den i en nettleser. Klikk på "Sett inn Div" -knappen. Koden går og setter inn en ny, redigerbar textarea kontroll inn i div. Skriv noe du liker i tekstområdet.

Hint

  • Endre verdiene for "rader" og kolonner "for å gjøre din textarea større eller mindre avhengig av dine behov. Sett en redigerbar regionen inn i en hvilken som helst div ved å sende div id verdi til" insertToDiv "-funksjonen.