Olá pessoal, gostaria de criar um titulo editavel, daqueles que são normais e quando clica aparece uma caixa de texto em input para digitar o texto e quando perde o foco, salva o que foi digitado no Input.
Eu até sei fazer isso, mas tem um problema, como eu faço para que fique salvo o que foi editado na Input, independentemente se eu editar e depois sair da pagina e volte denovo esteja a mesma coisa que eu editei na input? Teria como com um cookie? html? dhtml? javascript?
Tem esse codigo, mas como eu o modifico para que salve o que digitar na input mesmo se eu sair do site? (EMULEM NO BLOCO DE NOTAS COM EXTENSÃO .HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Texto editável com JavaScript</title>
<style type="text/css">
h1 {
font:normal 2.4em/1.6 georgia, "times new roman", "bitstream vera serif", times, serif;
color:#900;
}
</style>
<script type="text/javascript">
window.onload = function(){
function editTitle(){
var title = document.getElementsByTagName('h1')[0];
var span = title.firstChild;
span.onmouseover = function(){
this.title = 'Clique para editar o texto';
this.style.background = '#f5f5f5';
}
span.onmouseout = function(){
this.title = '';
this.style.background = '';
}
span.onclick = function(){
var textoAtual = this.firstChild.nodeValue;
var input = '<input type="text" name="1" value="'+textoAtual+'">';
this.innerHTML = input;
var field = this.firstChild;
this.onclick = null;
this.onmouseover = null;
field.focus();
field.select();
field.onblur = function(){
this.parentNode.innerHTML = this.value;
editTitle();
}
}
}
editTitle();
}
</script>
</head>
<body>
<h1><span>Edite este título</span></h1>
</body>
</html>
Question
Desafio
Olá pessoal, gostaria de criar um titulo editavel, daqueles que são normais e quando clica aparece uma caixa de texto em input para digitar o texto e quando perde o foco, salva o que foi digitado no Input.
Eu até sei fazer isso, mas tem um problema, como eu faço para que fique salvo o que foi editado na Input, independentemente se eu editar e depois sair da pagina e volte denovo esteja a mesma coisa que eu editei na input? Teria como com um cookie? html? dhtml? javascript?
Tem esse codigo, mas como eu o modifico para que salve o que digitar na input mesmo se eu sair do site? (EMULEM NO BLOCO DE NOTAS COM EXTENSÃO .HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Texto editável com JavaScript</title> <style type="text/css"> h1 { font:normal 2.4em/1.6 georgia, "times new roman", "bitstream vera serif", times, serif; color:#900; } </style> <script type="text/javascript"> window.onload = function(){ function editTitle(){ var title = document.getElementsByTagName('h1')[0]; var span = title.firstChild; span.onmouseover = function(){ this.title = 'Clique para editar o texto'; this.style.background = '#f5f5f5'; } span.onmouseout = function(){ this.title = ''; this.style.background = ''; } span.onclick = function(){ var textoAtual = this.firstChild.nodeValue; var input = '<input type="text" name="1" value="'+textoAtual+'">'; this.innerHTML = input; var field = this.firstChild; this.onclick = null; this.onmouseover = null; field.focus(); field.select(); field.onblur = function(){ this.parentNode.innerHTML = this.value; editTitle(); } } } editTitle(); } </script> </head> <body> <h1><span>Edite este título</span></h1> </body> </html>Edited by kuroiAdicionar tag CODE
Link to comment
Share on other sites
2 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.