elementi HTML contengono una proprietà interessante chiamato "contentEditable." L'attivazione di questa proprietà per un documento HTML rende l'intero modificabile documento. Gli sviluppatori del sito hanno anche la possibilità di modificare le proprietà contentEditable di alcuni elementi della pagina Web, come ad esempio div. Div sono elementi HTML che contengono altri elementi HTML. Utilizzando poche righe di JavaScript, è possibile fornire i visitatori del sito la possibilità di modificare i contenuti di qualsiasi blocco div nella pagina Web.

istruzione

1 Avviare Blocco note o un editor HTML.

2 Aprire un documento HTML che ha un div.

3 Individuare il tag di apertura div del div che si desidera rendere modificabile. Se si dispone già di una proprietà ID, il tag di apertura div avrà un aspetto simile a questo:

<Div id = "xyz">

La stringa "xyz" è il valore della id. Se non si vede una proprietà ID, il div non ne ha uno.

4 Aggiungere una proprietà ID al tag di apertura div se non esiste. Per esempio, se si vuole dare l'id un valore di "myDiv," modificare il tag in modo che appaia come segue:

<Div id = "myDiv">

Scegliere un nome a piacere per il valore.

5 Aggiungere il testo al blocco div se non esiste. Un tipico blocco div è simile a quella riportata di seguito:

<Div id = "xyz">

il testo va qui

</ Div>

In questo esempio, il div contiene testo che dice "il testo va qui." Se il div non ha alcun testo, digitare un paio di parole tra l'apertura e chiusura tag div.

6 Aggiungere questo codice HTML ovunque all'interno della sezione "corpo":

<Input type = valore "pulsante" = "Modifica Div" onclick = "tornare EditDiv ()" />

Questo crea un pulsante che chiama una funzione JavaScript quando si fa clic su di esso. Tale funzione rende il div modificabile.

7 Aggiungere il seguente codice JavaScript alla sezione "testa" del documento.

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

var divID = "div1";

funzione EditDiv () {

var divObject = document.getElementById (divID);

divObject.contentEditable = 'true';

divObject.designMode = 'on';

vuoto 0;

} </ Script>

La variabile chiamata "divID" contiene il valore della proprietà id del vostro elemento div. Sostituire "xyz" con il valore identificativo del tuo elemento div. La funzione JavaScript denominato "EditDiv" viene eseguito quando si fa clic sul pulsante. Si ottiene un riferimento al div e lo memorizza nella variabile denominata "divObject," Il codice rimanente rende l'oggetto modificabile impostando è e valori "contenteditable" "designMode" a "veri" e "on".

8 Salvare il documento e aprirlo nel browser. Vedrete le parole digitate nel blocco div. Tentativo di cambiarli. Non è possibile perché il div non è modificabile.

9 Fare clic sul pulsante "Modifica Div". La funzione JavaScript funziona e rende il div modificabile. Verificarlo digitando il testo all'interno del div.

Consigli e avvertenze

• Modifiche gli utenti fanno di un div non sono permanenti. Tali modifiche appaiono solo all'interno del browser dell'utente.
• Quando si aggiunge una sezione di "script" alla sezione "testa" di un documento HTML, posizionarlo dopo la sezione "titolo".
• I valori ID che si assegnano a ogni elemento della pagina non deve contenere spazi. "TestDiv1" è un valore di identità valido. "Test Div1" non è.