Content Editable
No HTML5 qualquer elemento pode ser editado. Usando alguns eventos de JavaScript podemos transformar sua web page em um editor de texto completo e rápido. Este artigo fornece algumas informações sobre esta funcionalidade.
Compatibilidade
Conteúdo editável é totalmente compatível com os seguintes browsers.
- Firefox 3.5+
- Firefox for Android 19+
- Chrome 4.0+
- Internet Explorer 5.5+ *
- Safari 3.1+
- Opera 9+
- iOS Safari 5.0+
- Android Browser 3.0+
- Opera Mobile 12.1+
- Chrome for Android 25+
Ainda não é suportato pelo Opera Mini.
*A maioria dos elementos HTML não suporta esta funcionalidade
Como isso funciona?
Defina o atributo contentEditable
para true
no seu elemento HTML. Isto pode ser usado na maioria dos elementos HTML.
Exemplos
Um exemplo simples:
<!DOCTYPE html> <html> <body> <div contentEditable="true"> Este conteúdo pode ser editado. </div> </body> </html>
Você pode ver o exemplo funcionando com com uma integração de JavaScript utilizando LocalStorage aqui. Com a fonte aqui.
Veja também
user_pref("capability.policy.policynames", "allowclipboard"); user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org"); user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess"); user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");
Como interagir com o conteúdo (Antiga API do IE) aqui