Ir para conteúdo
Fórum Script Brasil
  • 0

Curiosidades


André Gusmão

Pergunta

... que quase todos os objetos HTML podem se tornar editáveis?

Veja esse exemplo bem simples. Crie uma página HTML com o seguinte conteúdo:

<body contenteditable></body>
Agora rode a danada, digite algumas coisas e veja o que acontece.

Quer dar uma melhorada? Faça isso então...

<body contenteditable>

<input type="button" value="Ver código fonte" onClick="alert(document.body.innerHTML)">

</body>

Agora rode a bagaça, digite umas aneiras e clique no botão...

Não é demais? hehehehe...

Em breve postarei mais novidades...

:lol:

Link para o comentário
Compartilhar em outros sites

Posts Recomendados

  • 0

se você tiver criatividade dá pra 'brincar' com os usuários......................

é só juntar alguns códigos no meio....

Link para o comentário
Compartilhar em outros sites

  • 0

Ok, então vamos brincar um pouquinho?

Teste esse código aqui:

<style>

.bold {

width: 22px;

height: 22px;

text-align: center center;

font-weight: bold;

}

.italic {

width: 22px;

height: 22px;

text-align: center center;

font-style: italic;

}

.underline {

width: 22px;

height: 22px;

text-align: center center;

text-decoration: underline;

}

</style>

<table width="626" height="255" border="1" cellpadding="0" cellspacing="0">

<tr>

  <td align="left" valign="top">

  <span id="editor" contenteditable style="width:100%;height:100%" OnKeyPress="return digitacao(this)"></span>

  </td>

</tr>

</table>

    <table width="400" border="1" cellspacing="0" cellpadding="0">

        <tr>

            <td><input name="bold" type="submit" id="bold" value="N" class="bold" onClick="transform('b')">

                <input name="italic" type="submit" id="italic" value="I" class="italic" onClick="transform('i')">

                <input name="underline" type="submit" id="underline" value="S" class="underline" onClick="transform('u')"></td>

        </tr>

    </table>

    <br>

<a href="java script:fonte()">Código Fonte</a>

<script language="JavaScript">

editor.focus();

function digitacao(obj)

{

if(event.keyCode==13)

{

  obj.appendChild(document.createElement('<br>'));

  obj.appendChild(document.createElement('')); // Para saltar a linha

  return false;

}

return true;

}

function fonte()

{

var texto = editor.innerHTML;

alert(texto);

}

function transform(type)

{

var objText = document.selection.createRange();

if(type=='i')

    objText.pasteHTML('<i>'+objText.text+'</i>');

if(type=='b')

    objText.pasteHTML('<b>'+objText.text+'</b>');

if(type=='u')

    objText.pasteHTML('<u>'+objText.text+'</u>');

}

</script>

:lol:

Link para o comentário
Compartilhar em outros sites

  • 0

Como uso isso em um <textarea>

<style>
.bold {
width: 22px;
height: 22px;
text-align: center center;
font-weight: bold;
}

.italic {
width: 22px;
height: 22px;
text-align: center center;
font-style: italic;
}

.underline {
width: 22px;
height: 22px;
text-align: center center;
text-decoration: underline;
}
</style>
<table width="626" height="255" border="1" cellpadding="0" cellspacing="0">
<tr>
  <td align="left" valign="top">
  <span id="editor" contenteditable style="width:100%;height:100%" OnKeyPress="return digitacao(this)"></span>
  </td>
</tr>
</table>
    <table width="400" border="1" cellspacing="0" cellpadding="0">
        <tr>
            <td><input name="bold" type="submit" id="bold" value="N" class="bold" onClick="transform('b')">
                <input name="italic" type="submit" id="italic" value="I" class="italic" onClick="transform('i')">
                <input name="underline" type="submit" id="underline" value="S" class="underline" onClick="transform('u')"></td>
        </tr>
    </table>
    <br>
<a href="javascript:fonte()">Código Fonte</a>
<script language="JavaScript">
editor.focus();
function digitacao(obj)
{
if(event.keyCode==13)
{
  obj.appendChild(document.createElement('<br>'));
  obj.appendChild(document.createElement('')); // Para saltar a linha
  return false;
}

return true;
}
function fonte()
{
var texto = editor.innerHTML;
alert(texto);
}
function transform(type)
{
var objText = document.selection.createRange();
if(type=='i')
    objText.pasteHTML('<i>'+objText.text+'</i>');
if(type=='b')
    objText.pasteHTML('<b>'+objText.text+'</b>');
if(type=='u')
    objText.pasteHTML('<u>'+objText.text+'</u>');
}
</script>

valeu!!!

Link para o comentário
Compartilhar em outros sites

  • 0

blink, se cadastra ae.....faça parte integralmente da comunidade!!! :D

o que você quer usar num textarea blink??

Link para o comentário
Compartilhar em outros sites

  • 0

é isso ae david...

posta ai pra darmos uma olhadinha nele... :D

assim... você fez como??? Vbscript? Vb? C? C++? JavaScript+HTML?

hehehehe....

falou... :D

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,7k
×
×
  • Criar Novo...