Este código está na categoria javascript e mostra o seguinte assunto: Texto editável com JavaScript, em destaque estão os marcadores javascript, código, javascript,
<!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>
<< Anterior Texto com efeito elástico
Deixe um comentário