Nwlapcug.com


Come fare un DIV modificabile in HTML

Come fare un DIV modificabile in HTML


Elementi HTML contengono una proprietà interessante chiamata "contentEditable." L'abilitazione di questa proprietà per un documento HTML rende l'intero documento modificabile. Gli sviluppatori di siti hanno anche la possibilità di modificare le proprietà di contentEditable di certo elemento di pagina Web, ad esempio div. Divs sono elementi HTML che contengono altri elementi HTML. Utilizzando poche righe di JavaScript, si può dare ai visitatori del sito la possibilità di modificare il contenuto di qualsiasi blocco div nella pagina Web.

Istruzioni

1

Avviare Blocco note o editor HTML.

2

Aprire un documento HTML contenente un div.

3

Individuare l'apertura tag div del div si desidera rendere modificabili. Se ha già una proprietà id, l'apertura tag div avrà un aspetto simile al seguente:

< div id = "xyz" >

La stringa "xyz" è valore dell'id. Se non vedete una proprietà id, il div non dispone di uno.

4

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

< div id = "MyDiv" >

Scegliere qualsiasi nome desiderato per il valore.

5

Aggiungere testo al blocco div, se non esiste già. Un blocco div tipico è simile a quello riportato di seguito:

< div id = "xyz" >

testo va qui

< / div >

In questo esempio, il tag div contiene testo che legge, "il testo va qui." Se il vostro div non contiene testo, Inserisci alcune parole tra i tag di apertura e di chiusura div.

6

Aggiungere questo codice HTML in un punto qualsiasi all'interno della sezione "corpo":

< tipo input = "pulsante" value = "Edit Div" onclick = "return EditDiv()" / >

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

7

Aggiungere il seguente codice JavaScript nella sezione "head" del documento.

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

divID var = "div1";

Function EditDiv() () {

var divObject = document.getElementById(divID);

divObject.contentEditable = 'true';

divObject.designMode = 'on';

void 0;

} < / script >

La variabile denominata "divID" contiene il valore della proprietà id di elemento div. Sostituire "xyz" con il vostro elemento di div id. La funzione JavaScript denominata "EditDiv" viene eseguito quando si sceglie il pulsante. Ottiene un riferimento al div e negozi nella variabile denominata "divObject," il resto del codice rende tale oggetto modificabile mediante l'impostazione di esso "contentEditable" e "designMode" valori "true" e "on".

8

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

9

Fare clic sul pulsante "Edit Div". La funzione JavaScript viene eseguito e rende modificabile il div. È possibile verificarlo digitando il testo all'interno del div.

Consigli & Avvertenze

  • Modifiche agli utenti rendono ad un div non sono permanenti. Tali modifiche vengono visualizzati solo all'interno del browser di un utente.
  • Quando si aggiunge una sezione di "script" alla sezione "head" di un documento HTML, è possibile posizionarlo dopo la sezione "title".
  • I valori di ID che si assegnano a qualsiasi elemento della pagina non devono contenere spazi. "TestDiv1" è un valore di id valido. "Test Div1" non è.