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.