Hvordan lage en DIV redigerbare i HTML

Hvordan lage en DIV redigerbare i HTML


HTML-elementer inneholde en interessant egenskap kalt "contenteditable." Aktivering av denne eiendommen for et HTML-dokument gjør hele dokumentet redigeres. Side utviklere har også muligheten til å endre contenteditable egenskaper bestemt webside element, for eksempel divs. Divs er HTML-elementer som inneholder andre HTML-elementer. Ved å bruke noen få linjer med Javascript, kan du gi dine besøkende muligheten til å endre innholdet på div blokk på websiden.

Bruksanvisning

1 Start Notepad eller HTML-editor.

2 Åpne et HTML-dokument som har en div.

3 Finn åpning div tag av div du ønsker å gjøre redigerbar. Hvis det allerede har en id eiendom, vil åpningen div tag ser slik ut:

<Div id = "xyz">

Strengen "xyz" er id verdi. Hvis du ikke ser en id eiendom, ikke div ikke har en.

4 Legg en id eiendom til åpningen div tag hvis det ikke finnes. For eksempel, hvis du ønsker å gi id verdien "MyDiv," endre koden slik at det ser ut som følger:

<Div id = "MyDiv">

Velg et navn du selv for verdien.

5 Legg tekst til div blokken hvis det ikke finnes. En typisk div blokk ligner den nedenfor:

<Div id = "xyz">

tekst går her

</ Div>

I dette eksemplet inneholder div teksten det står "tekst går her." Hvis din div har ingen tekst, skriv noen ord mellom åpning og lukking div koder.

6 Legg denne HTML-koden hvor som helst inne i "kroppen" seksjonen:

<Input type = "button" value = "Rediger Div" onclick = "return EditDiv ()" />

Dette skaper en knapp som kaller en Javascript-funksjonen når du klikker på den. At funksjonen gjør div redigeres.

7 Legg til følgende Javascript-koden til "hodet" -delen av dokumentet.

<Script language = "javascript" type = "text / javascript">

Var Divid = "div1";

fungere EditDiv () {

Var divObject = document.getElementById (divId);

divObject.contentEditable = 'true';

divObject.designMode = 'on';

void 0;

} </ Script>

Variabelen kalt "Divid" inneholder verdien av div elementets id eiendom. Erstatt "xyz" med div elementets id verdi. Javascript-funksjonen som heter "EditDiv" går når du klikker på knappen. Det får en henvisning til div og lagrer den i variabelen som heter "divObject," De resterende kode gjør at objektet kan redigeres ved å sette det "contenteditable" og "designMode" verdier til "ekte" og "på".

8 Lagre dokumentet og åpne den i nettleseren din. Du vil se de ordene du skriver inn i div blokken. Forsøk på å endre dem. Du kan ikke fordi div kan ikke redigeres.

9 Klikk på "Rediger Div" -knappen. Javascript-funksjonen går og gjør div redigeres. Kontroller dette ved å skrive over teksten inne i div.

Hint

  • Endringer brukere gjør i en div er ikke permanent. Disse endringene bare vises inne i en brukers nettleser.
  • Når du legger til et "script" -delen til et HTML-dokument "head" -seksjonen, plasserer den etter "title" -delen.
  • ID-verdier som du tilordner til en side element må ikke inneholde mellomrom. "TestDiv1" er en gyldig id verdi. "Test Div1" er det ikke.