Fórum Sessão editavel #441009

25/04/2013

0

Front-end

Olá pessoa possuo a seguinte estrutura de página abaixo criada com HTML 5
onde possuo duas section e o meu problema é que preciso que na section com id="editavel" seja possivel apagar e escrever dentro dessa section.

Conseguir fazer o seguinte até o momento : 

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8"
    	<title>HTML 5 Test Content Editable</title>
    </head>
    <body>
    	<section>
        	<header>
            	<h1>Criando sessão editavel com HTML </h1>
            </header>
            
            <article>
            	<section>
                	<p>This paragraph not have contentEditable </p>
                </section>
                
                <section id="editavel">
                	<h2>Test HTML 5 ContentEditable</h2>
                    <p>This paragraph HAVE ContentEditable</p>
                    <ol>
                    	<li>Testando</li>
                    	<li>Exemplo</li>                        
                    	<li>HTML 5</li>                        
                    </ol>
                </section>
            </article>
            <footer>
            	Footer
            </footer>
        </section>        
    </body>
</html>
Walter Junior

Walter Junior

Responder

Posts

07/05/2013

Joel Rodrigues

Fala, Walter. Você deve utilizar o atributo contenteditable="true" no elemento que deseja que tenha o conteúdo editável.
Responder

Gostei + 0

07/05/2013

Joel Rodrigues

No caso, ficaria assim:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"
<title>HTML 5 Test Content Editable</title>
</head>
<body>
<section>
<header>
<h1>Criando sessão editavel com HTML </h1>
</header>

<article>
<section>
<p>This paragraph not have contentEditable </p>
</section>

<section id="editavel" contenteditable="true">
<h2>Test HTML 5 ContentEditable</h2>
<p>This paragraph HAVE ContentEditable</p>
<ol>
<li>Testando</li>
<li>Exemplo</li> 
<li>HTML 5</li> 
</ol>
</section>
</article>
<footer>
Footer
</footer>
</section> 
</body>
</html>

Responder

Gostei + 0

07/05/2013

Marcelo Pastore

me desculpe me meter, hehehe

testei os dois codigos e não notei diferença, o que seria essa sessão editavel? para que serve?
Responder

Gostei + 0

07/05/2013

Joel Rodrigues

Com o segundo código, o conteúdo do elemento que recebeu o atributo contenteditable ficará editável no browser, ou seja, o usuário poderá alterar o conteúdo da parágrafo, h1, ul, etc.
Responder

Gostei + 0

07/05/2013

Marcelo Pastore

ah entendi, mas isso é muito utilizado? mas para que especificamente?
Responder

Gostei + 0

07/05/2013

Joel Rodrigues

Rapaz, tudo depende da necessidade. De repente pode-se desejar que o usuário digite algo para depois recuperarmos o HTML do que ele digitou.
Se é muito utilizado? Bem, eu nunca vi em nenhum site, mas de repente... alguém deve usar.
Responder

Gostei + 0

08/05/2013

Marcelo Pastore

Rapaz, tudo depende da necessidade. De repente pode-se desejar que o usuário digite algo para depois recuperarmos o HTML do que ele digitou.
Se é muito utilizado? Bem, eu nunca vi em nenhum site, mas de repente... alguém deve usar.


hum, mas seria recuperado em algum banco? por exemplo.
Responder

Gostei + 0

08/05/2013

Joel Rodrigues

Como eu disse, depende do que você quiser fazer. Colocando o conteúdo na tela, o usuário pode editar, depois você decide o que fazer.
Não há regra.
Responder

Gostei + 0

03/06/2013

Walter Junior

Bom dia pessoal, obrigado Joel pelo código que me passou como exemplo era exatamente o que eu necessitava.
e obrigado também a todos os outros amigos que participaram do tópico
Responder

Gostei + 0

03/06/2013

Joel Rodrigues

Obrigado pelo retorno. Walter. Estou encerrando o tópico.
Responder

Gostei + 0

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar