2011/03/28

Contenteditable

Esta propiedad definida en HTML5 permite modificar los contenidos de las siguientes etiquetas:
<a> <acronym> <address> <b> <bdo> <big> <blockquote> <body> <button> <center> <cite> <code> <custom> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <font> <form> <hn> <i> <input type="button"> <inputtype="password"> <input type="radio"> <input type="reset"> <inputtype="submit"> <input type="text"> <ins> <isindex> <kbd> <label> <legend> <li> <listing> <marquee> <menu> <nobr> <object> <ol> <p> <pre> <q> <rt> <ruby> <s> <samp> <small> <span> <strike> <strong> <sub> <sup> <textarea> <tt> <u> <ul> <var> <xmp>
La sintaxis es:
<element contenteditable="value" > . . . </element>
Los valores para "value" son

  • inherit - Herede la posibilidad de ser editado dede el padre. Es el valor por defecto
  • false - No se puede editar
  • true - Sí se puede editar

Para poder leer el valor del elemento, hay que recurrir a la propiedad innerText desde javascript. No todo iba a ser un camino de rosas, verdad?.

Un ejemplito tontorrón. Básicamente lo que hace es que al hacer click en el <p> se pueda escribir su contenido.
<HTML>
<head><Title>Example For contenteditable</Title></head>
<BODY>
    <p contenteditable="true">contenteditable</p>
</BODY>
</HTML>

No hay comentarios:

Publicar un comentario