Neste exemplo vamos fazer um título editável, ou seja, um título normal que, ao ser clicado se transforma em um campo de texto (INPUT) que ao perder o foco salva o novo valor e volta a ser um título novamente.
<!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>
Postagens
1 Comentário:
Muito bom esse script. Thank you very much.
Postar um comentário