Jump to content
lucianfpaula

Mudar cor de texto selecionado

Recommended Posts

Olá saudações, tenho a seguinte duvida, dentro de uma div vou ter varios campos de texto, seja h1, p, smaill etc.. a minha duvida é a seguinte: como manipular a cor de um texto selecionado, tipo tenho um <h1>Minha texto que pode ser grande, quero mudar essa cor</h1> tem varios editor que usam textarea, mas queria saber se é possivel fazer isso a partir de qualquer tag. tipo seleciono o texto e clico em um botão com a cor que quero e mude o texto selecionado.

 

Muito obrigado

Share this post


Link to post
Share on other sites

tem como sim mas você terá que fazer alguns tratamentos vou deixar um exemplo aqui:

 

Lembrando que mesmo aparentemente funcional esse script tem uma falha de não remover os elementos criados se o mesmo texto sofrer outra alteraçao então se for ver pelo inspect element ira ver que sempre será gerado um elemento 'span' independente se já existe um parent encapsulando o mesmo range mas pra um exemplo acho que esse script já vai ajudar muito

 

HTML:

<div class="main-container">
  <span>text 1</span>
  <p>text 2</p>
  <p>
    this is text, select and right click to high light me! if you can`t see the option, please use this
  <p>
</div>

<button onclick="highlightSelection('red')">red</button>
<button onclick="highlightSelection('blue')">blue</button>

 

JS:

function highlightSelection(color) {
  var userSelection = window.getSelection();
  
  for(var i = 0; i < userSelection.rangeCount; i++) {
    highlightRange(userSelection.getRangeAt(i), color);
  }

}

function highlightRange(range, color) {
  var newNode = document.createElement("span");
  newNode.className = 'text-color';

  newNode.setAttribute(
    "style",
    "color:"+color+"; display: inline;"
  );
  range.surroundContents(newNode);
}

 

JSBin: https://jsbin.com/haciyozezi/edit?html,js,output

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By David Samu
      let total_entradas = 3//ai virar total de colunas
      let total_linhas   = 0
      let tabela         = []
      for(let coluna=total_entradas; coluna>0; coluna-- )
      {
          let repeticao = 1
          for(let x=1; x<=coluna; x++)
          {
              repeticao = (2 * repeticao)
          }
          if( total_linhas === 0 )
          {
              total_linhas = repeticao
          }
          if(repeticao != 1) 
          {
              repeticao = (repeticao / 2)
          }
          let valores = []
          let vdd     = 1
          let lastBoo = 'v'
          for( let linha=0; linha < total_linhas; linha++ )
          {
              if( vdd <= repeticao )
              {
                  val = lastBoo
              }
              else
              {
                  if( lastBoo == 'v' )
                  {
                      lastBoo = 'f'  
                  }
                  else 
                  {
                      lastBoo = 'v'
                  }
                  val = lastBoo
                  vdd=1
              }
              vdd++
              valores.push(val)
          }
          tabela[ (coluna - 1) ] = valores   
      }
      let countCol = 1
      for(let coluna=tabela.length - 1; coluna>=0; coluna--)
      {
          console.log("Coluna ", countCol++)
          for(let linha = 0; linha < tabela[coluna].length; linha ++)
          {
              console.log( tabela[coluna][linha] )
          }
      }
    • By andrelimaverde
      Pessoal preciso de uma ajuda, desde já agradeço à todos.
      "Site teste, estudos..."
      Tenho um formulário com 3 etapas, ele está trabalhando em php normalmente e salvando os dados preenchidos em .txt (para testes apenas).
      Vamos lá, nas 3 etapas o form está com action="1.php" (2.php,  3.php) e method="post". [Não vou colocar muito código para simplificar, pois é um formulário básico fácil de entender]
      Exemplo:  Pagina 1 - envia para action '1.php'
      Nome: 
      Telefone:
      <input type="submit" value="Continuar">
      (
       O arquivo 1.php armazena os dados e redireciona => header( 'Location:Pagina2.php' ) ;   
       Assim como os outros php's
      )
      Pagina 2 - action 2.php armazena os dados e redireciona => header( 'Location:Pagina3.php' ) ; 
      Cidade:
      Endereço:
      <input type="submit" value="Continuar">
       
      A questão está na 3ª página
      Página 3 -
      Email:
      (Preciso que após preencher o campo da página 3 no caso "Email:",  ao clicar no botão, neste caso não sei se seria um submit ou button. O formulário não redirecionar para pagina 4, ao clicar ele enviar e salvar normalmente, mas aparecer um novo input na mesma pagina por Exemplo:"Twitter:"  ) 
      No caso preciso que ele não redirecione , gostaria de colocar um gif de carregando por 15 segundos por exemplo como se estivesse processando as informações... e em seguida ele apresentar o novo input do "Twitter:" , onde ai sim enviaria normalmente...
    • By Wilson Fernandes
      Olá! Preciso de ajuda para começar a construir gráficos de funções quadráticas em plano cartesiano. Já procurei várias fontes, mas nenhuma explica como construir um bom gráfico.
    • By luigiferrari
      Criei um Form para fazer Cadastro, sempre que o usuário clica no botão para cadastrar é enviado um e-mail para o ADM.
      O meu problema é o seguinte, quando tem algum campo não preenchido e o usuário clica em cadastrar, o email é enviado e só depois o alert do campo obrigatório aparece.
      Gostaria de um JS que desativa o botão cadastrar até todos os campos estarem preenchidos corretamente.
      E também que quando a pessoa clicasse no Botão cadastrar, ele iria desativar novamente, para evitar o usuário de clicar mais de uma vez e acabar enviando mais emails...
       
      Segue o meu form...
       
    • By penelopevitoria_
      Pessoal,
       
      estou com muitos problemas de layout em minhas páginas AMP. O que rola é que vários elementos estão saindo compridos ou esticados. Enfim, o AMP estraga coisas como formulário também. Vocês sabem se existe uma maneira massiva de corrigir esses problemas pelo plugin? Tenho muitas páginas com o layout comprometido e não achei nada na internet que me ajudasse a corrigir. 
       
      Aguardo retorno :D
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.