Jump to content
Fórum Script Brasil
  • 0
Sign in to follow this  
André Gusmão

Curiosidades

Question

... 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:

Share this post


Link to post
Share on other sites

Recommended Posts

  • 0

nossa...

muito loko!!!... heheehe

Share this post


Link to post
Share on other sites
  • 0

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

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

Share this post


Link to post
Share on other 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:

Share this post


Link to post
Share on other sites
  • 0
Guest Blink

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!!!

Share this post


Link to post
Share on other sites
  • 0

Isso não funciona num TEXTAREA, pois todo conteudo do TEXTAREA é sempre texto e não HTML.

Mas você pode colocar por exemplo um SPAN com bordas, simulando um TEXTAREA, com CONTENTEDITABLE.

E para ler o conteúdo digitado use a propriedade innerHTML do objeto SPAN.

Share this post


Link to post
Share on other sites
  • 0

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

o que você quer usar num textarea blink??

Share this post


Link to post
Share on other sites
  • 0

hauahuahuahuha

gostei andré...

madou bem!!!!!! :D

hauhauahuahuahua

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other sites
  • 0

putz...

é... acontece...hehehe

:P

Share this post


Link to post
Share on other sites
  • 0

Apoio completamente a ideia do "meu codigo"..

Ae Gente.. querem um editor completo...

link.. -> B)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  



  • Forum Statistics

    • Total Topics
      148486
    • Total Posts
      644140
×
×
  • Create New...