Título editável – Estrelando: DOM e Javascript.

Eu queria ter postado ontem, porém por motivos de força maior, não pude fazê-lo.
Depois de ter enchido a tela de explicações sobre DOM, talvez não tenha elucidado uma maneira legal o uso de DOM, lembrei-me de um site o qual gosto NetVibes, lá tem várias coisa legais, mas uma me chamou a atenção, talvez pelo fato de aparentemente ser bem simples, mas isso não vem ao caso, pois bem, quando você entra no site, pode-se editar o título da página, estou falando dos dois títulos, da página e do browser, resolvi, então arregaçar as mangas e colocar o tico-teco para funcionar. O resultado, foi o seguinte:

<html>
<title>Título editável com JavaScript</title>

<!– O css abaixo, é para o página não ficar extremamente tosca, só pra dar um estilozinho, qualquer dúvida vai no post CSS – Parte I –>
<style type=”text/css”>
#titulo {
font-size:36px;
font-face: “Comic Sans MS”;
color:#400;
}
</style>
<script type=”text/javascript”>

//Quando carregar a página ele chama essa função

window.onload = function(){
function editartitulo(){

// A linha abaixo ele procura “um” elemento que tenha a id titulo, que no nosso caso o elemento é um span

var span = document.getElementById(‘titulo’);
span.onmouseover = function(){

// ele chama essa função quando o mouse passa por cima dele (span).

this.style.background = ‘#000000’;

// troca a cor de fundo.

this.title = “Clique”

// coloca uma tag, para o usuário saber onde clicar.

}
span.onmouseout = function(){

// Função executada quando o mouse sai de cima do span.

this.style.background = ”;
}
span.onclick = function(){

// Função executado ao clicar do mouse (no span, é claro)

var texto = this.firstChild.nodeValue;

// Aqui começa a parte interessante, ele joga dentro da variável texto, o conteúdo do “primeiro filho”, do span, que no caso é o texto contido nele, através da propriedade nodevalue.

var input = ‘<input type=”text” value=”‘+texto+'”>’;

// Via código, como já disse antes, criamos um elemento input do tipo caixa de texto, por padrão é o conteúdo da variável texto.

this.innerHTML = input;

// inclui o input dentro do span

var cxtexto = this.firstChild;

// isso é uma forma que muita gente usa, inclusive eu, para não ficar chamando o elemento pelo “nome completo” (this.firstChild). como todo bom brasileiro, criamos apelidos para isso.

this.onclick = null;
this.onmouseover = null;
cxtexto.select();

// Isso é firula, é pra você não precisar selecionar tudo o que está dentro da caixa de texto, para depois digitar o que queira.

cxtexto.onblur = function(){

// Função executada quando a caixa de texto perde o foco.

this.parentNode.innerHTML = this.value;

//o pai da caixa de texto (no caso, o span), recebe o valor da caixa de texto.

document.title = this.value;

// O título do documento, recebe o valor da caixa de texto

editartitulo();

//recursividade, em outro post eu explico isso

}

//Abaixo vai um plus do código, eu vi no site do O Básico da Web, é pra você poder, apertando a tecla enter, fazer a entrada do texto que você digitou.🙂
// é bem simples, toda vez que você digitar algo, verifica-se qual é o código da tecla na tabela ASCII, se foi igual ao enter, código 13, a caixa de texto perde o foco.

cxtexto.onkeypress = function(e){

var keynum;
if(window.event) // IE
keynum = window.event.keyCode;
else if(e.keyCode) // Netscape/Firefox/Opera
keynum = e.which;
if (keynum == 13) this.blur();
}
}
}
editartitulo();
}
</script>

</head>
<body>
<center><span id=”titulo”>Edite este título</span></center>

</body>
</html>

ps: Não seria necessário colocar o código no javascript para o onmouseover e onmouseout para trocar a cor de fundo do span, bastaria colocar hover no css, mas o nosso excelentissímo IEca não aceita.

Como diria a minha vovózinha, mamão-com-açúcar. Só mais uma coisa, como deve ter percebido, usa-se muito a variável this, e eu não comentei sobre o uso dela, é que isso já é um assunto, para os próximos posts.

ps: Eu não coloquei no título para não assustar, mas isso é um exemplo de DHTML.

fuiii…

4 respostas para Título editável – Estrelando: DOM e Javascript.

  1. André Barbosa disse:

    function editaveo (id, nome){
    document.getElementById(id).innerHTML=””;

    }

    function editaveo_go (id, dados, caracter){
    var nTecla = 0;
    if (document.all) {
    nTecla = caracter.keyCode;
    } else {
    nTecla = caracter.which;
    }
    if (nTecla==13) { // 13 == Enter
    document.getElementById(id).innerHTML=”“+dados.value+
    “;
    }
    if (nTecla==27) { // 13 == Enter
    document.getElementById(id).innerHTML=”“+dados.value+
    “;
    }

    }

    ***html

    aldisseia

  2. André Barbosa disse:

    Vixi o site aceita tag …

    o reto fica assim

    aldisseia

  3. André Barbosa disse:

    a chamada do html fica assim:
    (span id=”tt”)
    (a href=”#” onclick=”editaveo(‘tt’,’aldisseia’);” aldisseia /a )
    (/span)

    AI por motivos que o site aceita tag troquei o < pelo (
    kKKKKKkKkKKK

  4. Pergunta disse:

    Bom código, agora se eu quisesse que na tecla “enter” salvasse, no “esc” não salvar e no “click” fora do campo input também não salvar?

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: