Cómo hacer un DIV en HTML editable

elementos HTML contienen una propiedad interesante llamado "contentEditable." La activación de esta propiedad para un documento HTML hace que todo el documento editable. los desarrolladores de sitios también tienen la capacidad de cambiar las propiedades de contentEditable determinado elemento de la página web, como divs. Divs son elementos HTML que contienen otros elementos HTML. Mediante el uso de unas pocas líneas de JavaScript, puede dar a sus visitantes del sitio la posibilidad de modificar el contenido de cualquier bloque div en su página web.

Instrucciones

1 Poner en marcha el Bloc de notas o su editor HTML.

2 Abrir un documento HTML que tiene un div.

3 Busque la etiqueta de apertura de la div div que desea convertir en editable. Si ya tiene una propiedad de la identificación, la etiqueta de apertura div será similar a esto:

<Div id = "xyz">

La cadena "xyz" es el valor de la ID. Si no ve una propiedad id, el div no tiene uno.

4 Añadir una propiedad id de la etiqueta de apertura div si no existe ninguno. Por ejemplo, si usted quiere dar el id de un valor de "myDiv," modificar la etiqueta para que se vea de la siguiente manera:

<Div id = "myDiv">

Elige el nombre que desee para el valor.

5 Añadir texto al bloque div si no existe ninguno. Un bloque div típica es similar al que se muestra a continuación:

<Div id = "xyz">

texto va aquí

</ Div>

En este ejemplo, el div contiene el texto que lee, "texto va aquí." Si el div no tiene ningún texto, escriba algunas palabras entre la apertura y cierre de etiquetas div.

6 Añadir este código HTML en cualquier lugar dentro de la sección "cuerpo":

<Input type = valor "botón" = "Editar Div" onclick = "return EditDiv ()" />

Esto crea un botón que llama a una función de JavaScript al hacer clic en él. Esta función hace que el div editable.

7 Agregue el siguiente código JavaScript a la sección de "cabeza" del documento.

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

var divID = "div1";

funcionar EditDiv () {

var divObject = document.getElementById (divID);

divObject.contentEditable = "true";

divObject.designMode = "on";

void 0;

} </ Script>

La variable denominada "divID" contiene el valor de la propiedad id del elemento div. Reemplazar "xyz" con un valor de identificación de su elemento div. La función JavaScript denominada "EditDiv" se ejecuta cuando se hace clic en el botón. Se obtiene una referencia a la div y lo almacena en la variable llamada "divObject," El código restante hace que el objeto editable mediante el establecimiento de valores "es contentEditable" y "DesignMode" a "true" y "on".

8 Guarde el documento y abrirlo en su navegador. Usted verá las palabras que ha escrito en el bloque div. Intentar cambiarlos. No se puede porque el div no se puede editar.

9 Haga clic en el botón "Editar Div". La función de JavaScript se ejecuta y hace que el div editable. Verificar esta escribiendo encima del texto dentro de la div.

Consejos y advertencias

• Los cambios los usuarios realizan en un div no son permanentes. Esos cambios sólo aparecen dentro de un navegador del usuario.
• Al agregar una sección de "guión" de la sección "cabeza" de un documento HTML, colocarla después de la sección "título".
• Los valores de ID que asigna a cualquier elemento de la página no deben contener espacios. "TestDiv1" es un valor de identidad válido. "Prueba Div1" no lo es.