Pesquisar na Comunidade
Mostrando resultados para as tags ''campo''.
Encontrado 1 registro
-
javascript Converter elemeto campo de texto para edição do texto
Juliana~* postou um tópico no fórum em Desenvolvimento Web
O JS evolui muito com o tempo... a edição de conteúdo ficou bem mais dinâmico, o código em si é limpo e da para entender com analises básicas, claro, daquele jeito. Vamos lá: Obrigatoriamente precisamos do jQuery <script src="[Hidden Content]; Criando os elemento para o acontecimento do evento <div class="pre-view"> <p class="texto">Aqui como exemplo, vou colocar um texto box para a edição desse paragrafo</p> </div> Código comentado... <script> // chave global para o controle de eventos var keys = [true]; /* Elemento a ser editado Lembrando que deve necessáriamente ser 'classe' pois ele buscará o indice */ $('.texto').click(function() { var a,b; // deve haver o controle do click, se não da bug :( // ele é liberado após o texto ser editado na função preview(a,b) if (keys[0]) { // bloqueia esse evento apos o primeiro click keys[0] = false; a = $(this).attr('class'); // nome da classe do elemento atual a = '.'+a; // lembrando que é uma classe... -> .texto b = $(a).index(this); // indice do elemento atual preview(a,b); } }); function preview(a,b) { var c = [$(a+':eq('+b+')')]; // seleciona o elemento atual c[1] = c[0].text(); // texto inicial do elemento // limpa o elemento // insere o textarea c[0].empty(). prepend('<textarea cols="60" type="text" class="lol">'+c[1]+'</textarea>'). click(function() { // chama o foco para o elemento criado acima $('.lol').focus(); }). keydown(function(evt) { // caso a tecla pressionada seja 13, ou melhor, ENTER faça... if (evt.keyCode == 13) { d = $('.lol'); // selecionando elemento textarea /* if minificado if (d.val() == '') { c[0].text(c[1]); } else { c[0].text(d.val()); } */ c[0].text(d.val() == '' ? c[1] : d.val()); d.remove(); // remove o textarea keys[0] = true; // libera para edição novamente } }); } </script> Dúvidas? Só perguntar... [spoiler=titulo - off] title,Converter elemento em textarea pra edição
