Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

caiocas

[Resolvido] Mudar cor de texto no input

Recommended Posts

Olá pessoal, eu gostaria de fazer um botão que quando eu o apertasse o texto selecionado em um input ficasse de outra cor, e no caso este texto com uma cor diferente seria salvo no BD MySQL. Eu acho que isso é tipo um mini editor de textos.

 

Como eu conseguiria fazer isso? Eu sei que tem que usar Javascript mas não sei como, por favor me ajudem! :)

Compartilhar este post


Link para o post
Compartilhar em outros sites

Você vai salvar o texto com formatação? Em Jquery eu acho que ficaria assim:

****legenda****

botao = seu botão

textarea = sua textarea

cordotexto = o css que você quer no seu texto

***************

$('#botao').click(function () {
    $('#textarea').css('color' : 'cordotexto');
});

 

Se isso não der certo avise me. Se tiver dúvidas também. Agora você não acha melhor formatar a saída dos dados?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Oi MafnGamer valeu pela resposta, mas eu não manjo muito de Javascript :grin: , então eu gostaria q você me dissesse como eu poderia usar este código, eu tentei assim:

 

<script language="javascript">
<!--
function texto($('#botao').click(function () {
    $('#textarea').css('color' : '#FF0000');
});
</script>
<input type="button" value="ver." class="botao" id="botao" onclick="javascript:texto('')" /><br />
<textarea id="textarea" rows="5"></textarea>

 

Mas não funcionou. Eu to querendo salvar ele no BD MySQL, com o código da mudança de cor salvo pra quando eu abrir uma página recuperando estes dados só aquela palavra (no caso) fique em vermelho!

 

Eu não quero um editor de texto pq o meu input é pequeno, e eu só quero mesmo a função de deixar esta palavra em vermelho!

 

Como está imagem abaixo:

 

exemplii.png

 

Quando clicar neste botão "ver." o texto selecionado fica vermelho, no input não aparece o código, mas por trás dele tem o código "<font color='#FF0000'>TEXTO</font>".

 

Entendesse?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu não quero um editor de texto pq o meu input é pequeno, e eu só quero mesmo a função de deixar esta palavra em vermelho!

Bom, se é apenas o que você falou, acho melhor apenas aplicar um estilo ao seu textarea e salvar o texto puro no banco. Quando você resgatar e jogar novamente no input, ele aparecerá vermelho.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom, se é apenas o que você falou, acho melhor apenas aplicar um estilo ao seu textarea e salvar o texto puro no banco. Quando você resgatar e jogar novamente no input, ele aparecerá vermelho.

 

Oi Lucas, eu vou explicar isso aí, esse site é um conjugador de verbos, então nem todas as palavras vão ficar em vermelho (só as que a conjugação for irregular) então eu não posso deixar aquele input sempre vermelho! Pq de toda forma ele pode ser vermelho em uma conjugação e em outra não!

 

Mas tu aconselhas o q? Eu colocar direto a tag <font> ?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Mano não precisava você criar uma função era só você linkar o jquery na sua página e colocar esse código em um script:

$('#botao').click(function () {
    $('#textarea').css('color' : '#FF0000');
});

Você já usa jquery na sua página?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não uso o Jquery, eu não sei usar o Javascript, eu só to querendo usar ele pq pelo q eu vi é o único jeito de conseguir este efeito, mas eu não estou entendendo este código q tu colocaste aí... Desculpa aí pela lerdeza :cry:

 

-----

 

última hora:

 

Olha só, eu encontrei este código aqui que eu acho q pode me servir:

 

<input type="text" id="area" value="" size="50" />
<br />
<input type="button" onclick="carrega_text_area()" value="Add" />
<script>
var txt_pre_definido='<font color="#FF0000">TEXTO</font>';

function carrega_text_area()
{
document.getElementById('area').value=txt_pre_definido;
}
</script>

 

Só queria saber mais uma coisinha, como eu faço para este texto pre definido ser aplicado no texto selecionado?

 

Por exemplo, eu já escrevi "sou", aí eu seleciono este "sou" com o mouse e clico em no botão "add", ai fica "<font color="#FF0000">sou</font>". Como faço isso?

 

Gente consegui o que eu queria! Procurando na net encontrei um código e adaptei para o meu caso! Olha ele aí:

 

<input type="text" id="mensagem" name="mensagem">
<input type='button' accesskey='b' value='Ver.' style="cursor: hand" border="0" onclick="insertcode('b');">
<script>
function insertcode(tag, desc)
{
       // o textarea que vai ser o alvo.
       var textarea = document.getElementById("mensagem");

       // a tag aberta
       var open = "<font color='#FF0000'>";

       // a tag fechada
       var close = "</font>";

       if(!textarea.setSelectionRange)
       {
               var selected = document.selection.createRange().text;
               if(selected.length <= 0)
               {
                       // se nenhum texto foi selecionado antes, abre dialogo para digitar algum
                       textarea.value += open + prompt("Digite a palavra ou frase para " + desc, "") + close;
               }
               else
               {
                       // adiciona as tags antes e depois do texto selecionado
                       document.selection.createRange().text = open + selected + close;
               }

       }
       else
       {
               // como fica o texto selecionado
               var pretext = textarea.value.substring(0, textarea.selectionStart);

               // texto selecionado com as tags antes e depois
               var codetext = open + textarea.value.substring(textarea.selectionStart, textarea.selectionEnd) + close;

               // o texto depois da seleção
               var posttext = textarea.value.substring(textarea.selectionEnd, textarea.value.length);

               // verifica se existe uma seleção
               if(codetext == open + close)
               {
                       //notifica o usuario
                       codetext = open + prompt("Digite a palavra ou frase para " + desc, "") + close;
               }

               // atualiza o textarea
               textarea.value = pretext + codetext + posttext;
       }

       // manda o focus para o fim do textarea
       textarea.focus();
}
</script>

 

Valeu para aqueles q tentaram me ajudar! Valeu! :grin:

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.