Meta tags:
description= O atributo contenteditable define se o conteúdo de um elemento é editável. Veja valores, uso com JavaScript e dicas de acessibilidade.;
Headings (most frequently used words):
contenteditable, do, com, atributo, html, quando, usar, sintaxe, exemplo, herança, valor, inherit, leitura, salvamento, conteúdo, editado, javascript, acessibilidade, inconsistências, entre, navegadores, atributos, relacionados, prática,
Text of the page (most frequently used words):
html (70), #contenteditable (32), svg (19), elemento (18), aprender (15), #atributo (15), não (14), editável (12), para (11), editor (11), com (11), pode (11), true (11), uma (10), div (10), que (10), atributos (9), conteúdo (9), this (9), canvas (9), quando (8), texto (8), body (8), title (8), formulário (7), tags (7), head (7), todos (6), javascript (6), navegadores (6), inherit (6), como (6), false (6), w3docs (5), editado (5), valor (5), ser (5), plaintext (5), seu (5), text (5), mas (5), copiar (5), aria (5), campo (5), innerhtml (5), input (5), você (5), edição (5), introdução (5), html5 (5), formatter (5), color (5), code (4), generator (4), prática (4), css (4), content (4), são (4), only (4), ele (4), pai (4), elementos (4), formatação (4), label (4), adicione (4), simples (4), usuário (4), saved (4), editable (4), doctype (4), paragraph (4), string (4), textarea (4), sobre (3), json (3), encoder (3), ferramentas (3), quizzes (3), exercícios (3), php (3), entre (3), acessibilidade (3), page (3), valores (3), por (3), globais (3), navegador (3), dentro (3), rich (3), suporte (3), antes (3), disso (3), evento (3), real (3), diretamente (3), script (3), save (3), the (3), links (3), listas (3), precisar (3), formulários (3), imagens (3), templates (3), tools (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), idioma (2), beautifier (2), diff (2), password (2), try (2), python (2), java (2), git (2), livros (2), snippets (2), relacionados (2), inconsistências (2), leitura (2), salvamento (2), herança (2), exemplo (2), sintaxe (2), usar (2), controls (2), definido (2), também (2), padrão (2), usado (2), quais (2), das (2), afirmações (2), seguir (2), verdadeiras (2), qualquer (2), draggable (2), desativa (2), região (2), depender (2), estilos (2), enter (2), linha (2), este (2), biblioteca (2), vez (2), bruto (2), comment (2), tabindex (2), multiline (2), textbox (2), role (2), teclado (2), contrário (2), digitar (2), servidor (2), post (2), you (2), and (2), note (2), localstorage (2), edit (2), const (2), document (2), element (2), negrito (2), portanto (2), enviado (2), inherits (2), change (2), define (2), filho (2), herda (2), estado (2), apenas (2), tag (2), layout (2), página (2), tabela (2), sem (2), comentários (2), editores (2), base (2), accept (2), dir (2), referência (2), tutorial (2), url (2), http (2), iso (2), hash (2), 2026, direitos, reservados, feito, desenvolvedores, política, privacidade, contato, empresa, tutoriais, exemplos, gratuitos, web, desde, 2014, next, previous, yes, was, helpful, verificar, três, principais, alguns, suportam, experimental, herdado, especificar, conjunto, completo, utilizáveis, controla, arrastado, ativa, verificação, ortográfica, spellcheck, tem, lugares, faça, detecção, recurso, frequentemente, traz, fonte, necessário, interceptar, limpá, los, paste, colar, pressionar, envolver, nova, inserir, dependendo, presuma, estrutura, gerada, marcação, tecla, difere, poderoso, comportamento, uniforme, principal, motivo, pelo, qual, aplicações, produção, geralmente, baseiam, usam, type, your, for, naturalmente, focalizável, usuários, possam, acessá, associe, visível, via, tenha, nome, acessível, labelledby, seja, anunciado, aceitar, múltiplas, linhas, parece, expõe, tecnologias, assistivas, leitores, tela, podem, anunciá, algo, criar, personalizado, ajude, nenhuma, semântica, salvar, armazena, sempre, confiável, cliente, homologada, salvá, exibi, novamente, evitar, cross, site, scripting, xss, sanitize, aviso, fetch, api, method, app, would, debounce, server, setitem, addeventlistener, every, null, getitem, restore, any, previously, getelementbyid, then, reload, reagir, edições, medida, acontecem, ouça, disparado, cada, alteração, removida, textcontent, mantém, existe, propriedade, value, one, explicitly, again, opts, out, locked, cannot, edited, editing, from, can, example, tornar, toda, depois, excluir, específico, experimente, mesmo, not, desativada, aceito, modernos, verifique, compatibilidade, mais, próximo, omitido, vazia, comporta, mesma, forma, significado, aceita, seguintes, escolha, eles, campos, reais, validam, postam, automaticamente, use, quiser, ocorra, existente, formatado, onde, área, resultado, renderizado, uis, prévia, vivo, anotações, permitir, clique, título, célula, renomeá, lugar, abrir, separado, inline, caixas, wysiwyg, cmses, clientes, mail, conter, então, saída, formatada, enquanto, digita, encontrará, trás, funcionar, quase, transformar, seção, inteira, superfície, faz, parte, dos, está, disponível, especifica, ativado, clicar, apagar, formatar, processador, veja, uso, dicas, charset, checked, autoplay, action, accesskey, colspan, defer, autofocus, autocomplete, download, disabled, coords, async, alt, attribute, reference, forms, vídeos, youtube, multimídia, media, class, obsoletos, attributes, gradiente, radial, lineargradient, sombras, projetadas, efeitos, desfoque, aos, filtros, stroking, path, polyline, polygon, elipse, círculo, retângulo, gradientes, coordenadas, desenhando, xmp, wbr, video, var, track, time, thead, tfoot, template, tbody, table, sup, summary, sub, style, strong, strike, span, spacer, source, small, select, section, samp, ruby, rtc, progress, pre, picture, param, output, option, optgroup, object, noscript, noframes, nobr, nav, meter, meta, menuitem, menu, marquee, mark, map, main, link, legend, keygen, kbd, isindex, ins, img, iframe, hgroup, header, frameset, frame, form, footer, font, figure, figcaption, fieldset, embed, dialog, dfn, details, del, datalist, data, colgroup, col, cite, center, caption, button, blockquote, blink, big, bdo, bdi, basefont, audio, aside, article, area, applet, address, acronym, abbr, obsoletas, xhtml, tipos, mime, mensagens, status, métodos, atalhos, entidades, codificação, utf, códigos, 8859, ascii, conjuntos, caracteres, references, migração, áudio, vídeo, semânticos, computercode, caminhos, arquivo, scripts, blocos, tabelas, cores, títulos, básicas, basics, entrar, pesquisar, formatters, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, cursos,
Text of the page (random words):
atributo contenteditable do html w3docs w3docs livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python cursos quizzes exercícios snippets ferramentas general tools html editor password generator html encoder code diff json beautifier todos os 13 color tools color picker color converter color mixer color hex colors hsl todos os 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder todos os 19 code formatters javascript formatter css formatter html formatter json formatter php formatter pesquisar na w3docs k pt english en deutsch de русский ru français fr español es português pt italiano it entrar aprender html html basics introdução ao html editores e ferramentas elementos html tags básicas do html atributos html títulos html formatação html links html listas html cores em html comentários html tabelas html blocos html scripts html estilos html css caminhos de arquivo html html computercode html templates templates de layout templates de formulários html 5 introdução ao html5 tags html5 elementos semânticos áudio vídeo suporte a navegadores html5 migração para html5 html references conjuntos de caracteres ascii iso 8859 1 códigos de idioma iso codificação utf 8 entidades html atalhos de teclado métodos http imagens html mensagens de status http tipos mime tabela de tags html xhtml html url html tags tags obsoletas atributos globais html atributos de evento tags html doctype a abbr acronym address applet area article aside audio b base basefont bdi bdo big blink blockquote body br button canvas caption center cite code col colgroup data datalist dd del details dfn dialog dir div dl dt em embed fieldset figcaption figure font footer form frame frameset h1 h6 head header hgroup hr html i iframe img input ins isindex kbd keygen label legend li link main map mark marquee menu menuitem meta meter nav nobr noframes noscript object ol optgroup option output p param plaintext picture pre progress q rb rp rt rtc ruby s samp script section select small source spacer span strike strong style sub summary sup svg table tbody td template textarea tfoot th thead time title tr track tt u ul var video wbr xmp canvas tutorial introdução ao canvas desenhando no canvas coordenadas do canvas gradientes no canvas texto no canvas imagens no canvas referência do canvas svg tutorial introdução ao svg svg no html5 retângulo svg círculo svg svg elipse linha svg svg polygon svg polyline svg path svg text svg stroking introdução aos filtros svg efeitos de desfoque svg sombras projetadas svg svg lineargradient gradiente radial svg referência svg html attributes atributos obsoletos atributo class do html atributo id do html html media html multimídia vídeos do youtube em html html forms formulários html html attribute reference alt async accept content contenteditable controls coords disabled download draggable autocomplete autofocus defer dir colspan accesskey action autoplay checked accept charset atributo contenteditable do html o atributo contenteditable define se o conteúdo de um elemento é editável veja valores uso com javascript e dicas de acessibilidade o atributo html contenteditable especifica se o conteúdo de um elemento pode ser editado diretamente no navegador quando ativado o usuário pode clicar dentro do elemento e digitar apagar e formatar texto como em um processador de texto sem precisar de input ou textarea por funcionar em quase qualquer elemento contenteditable pode transformar uma div um p ou uma seção inteira em uma superfície de edição ele faz parte dos atributos globais portanto está disponível em todos os elementos html quando usar contenteditable contenteditable é a base da edição em página você o encontrará por trás de editores de rich text as caixas wysiwyg em cmses clientes de e mail e formulários de comentários ao contrário de um textarea um elemento editável pode conter html real texto em negrito links listas e imagens então o usuário vê a saída formatada enquanto digita edição inline permitir que um usuário clique em um título ou célula de tabela para renomeá lo no lugar sem abrir um formulário separado uis de prévia ao vivo e anotações onde a área de edição é o resultado renderizado escolha um textarea ou input quando precisar apenas de texto simples que é enviado com um formulário eles são campos de formulário reais validam e postam seu valor automaticamente use contenteditable quando precisar de conteúdo formatado html ou quiser que a edição ocorra dentro do layout existente da página sintaxe tag contenteditable true tag copiar o atributo aceita os seguintes valores valor significado true ou o elemento é editável uma string vazia se comporta da mesma forma que true false o elemento não é editável inherit o elemento herda seu estado editável do pai mais próximo este também é o padrão quando o atributo é omitido plaintext only o elemento é editável mas a formatação rich text é desativada apenas texto simples é aceito com suporte em navegadores modernos mas verifique a compatibilidade antes de depender disso exemplo doctype html html head title title of the document title head body p contenteditable false this is a paragraph it is not editable p p contenteditable true this is a paragraph it is editable try to change this text p body html copiar experimente você mesmo herança com o valor inherit quando você não define contenteditable em um elemento filho ele herda o estado editável do pai você pode tornar toda uma região editável no pai e depois excluir um filho específico com contenteditable false doctype html html head title contenteditable inherit example title head body div contenteditable true p this paragraph inherits editing from the div so you can change it p p contenteditable false this paragraph opts out it is locked and cannot be edited p p contenteditable inherit this one explicitly inherits so it is editable again p div body html copiar leitura e salvamento do conteúdo editado com javascript um elemento contenteditable não é um campo de formulário portanto seu valor não é enviado com um formulário e não existe a propriedade value em vez disso você lê o conteúdo diretamente do elemento element innerhtml o conteúdo editado como html mantém negrito links listas element textcontent o conteúdo editado como texto simples formatação removida para reagir às edições à medida que acontecem ouça o evento input que é disparado a cada alteração doctype html html head title save editable content title head body div id editor contenteditable true edit me then reload the page div script const editor document getelementbyid editor restore any previously saved content const saved localstorage getitem note if saved null editor innerhtml saved save on every edit editor addeventlistener input localstorage setitem note editor innerhtml in a real app you would debounce this and post it to a server e g fetch api save method post body editor innerhtml script body html copiar aviso salvar innerhtml diretamente em um servidor armazena html bruto sempre sanitize html não confiável no servidor ou com uma biblioteca cliente homologada antes de salvá lo ou exibi lo novamente para evitar cross site scripting xss acessibilidade um elemento contenteditable simples parece editável mas ao contrário de um campo de formulário real ele não expõe nenhuma semântica de campo para tecnologias assistivas leitores de tela podem não anunciá lo como algo em que o usuário pode digitar ao criar um editor personalizado ajude os adicione role textbox para que seja anunciado como um campo de texto editável adicione aria multiline true se aceitar múltiplas linhas adicione um aria label ou associe um label visível via aria labelledby para que o campo tenha um nome acessível adicione tabindex 0 se o elemento não for naturalmente focalizável para que usuários de teclado possam acessá lo div contenteditable true role textbox aria multiline true aria label comment tabindex 0 type your comment div copiar inconsistências entre navegadores contenteditable é poderoso mas seu comportamento não é uniforme entre os navegadores este é o principal motivo pelo qual aplicações em produção geralmente se baseiam em uma biblioteca ou usam plaintext only em vez do contenteditable bruto a marcação da tecla enter difere pressionar enter pode envolver uma nova linha em uma div um p ou inserir um br dependendo do navegador não presuma a estrutura html gerada colar frequentemente traz estilos e tags da fonte pode ser necessário interceptar o evento paste e limpá los plaintext only desativa a formatação rich text mas não tem suporte em todos os lugares faça a detecção de recurso antes de depender disso atributos relacionados spellcheck ativa ou desativa a verificação ortográfica do navegador dentro de uma região editável draggable controla se um elemento pode ser arrastado atributos globais o conjunto completo de atributos utilizáveis em qualquer elemento prática prática quais das afirmações a seguir são verdadeiras sobre o atributo html contenteditable quais das afirmações a seguir são verdadeiras sobre o atributo html contenteditable o atributo html contenteditable é usado para especificar se o conteúdo de um elemento é editável ou não o atributo html contenteditable só pode ser usado com elementos de formulário quando o atributo contenteditable não é definido em um elemento por padrão ele é herdado do seu pai os três valores principais do atributo html contenteditable são true false e inherit alguns navegadores também suportam o experimental plaintext only o atributo html contenteditable só pode ser definido como true ou false verificar was this page helpful yes no previous content next controls on this page quando usar contenteditable sintaxe exemplo herança com o valor inherit leitura e salvamento do conteúdo editado com javascript acessibilidade inconsistências entre navegadores atributos relacionados prática w3docs tutoriais exemplos exercícios snippets e quizzes gratuitos para a web desde 2014 livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python prática exercícios quizzes editor try it ferramentas html editor password generator html encoder code diff json beautifier empresa sobre contato política de privacidade idioma english deutsch русский français español português italiano 2026 w3docs todos os direitos reservados feito para desenvolvedores
|
