JQuery Trocar cor do fundo do input text via Jquery

[Visitante]

Boa noite a todos!

Eu tenho o seguinte código:

$(document).ready(function(){
	
	$("#cores").change(function(){
		var valor = $(this).val();
		$("#resultado").val(valor);
	});

	$("#hexa").change(function(){
		var valor = $(this).val();
		$("#resultado").css({"background-color"}:{valor});
	});
});

 

Para este input-group-prepend do Bootstrap4

 

Gostaria de ter um preview do nome da cor digitado, junto com a cor no fundo da input text que aparece ao lado de Preview da cor.

deveria funcionar assim:

 

acontece que meu código JQuery, está errado de alguma forma que não sei como fazer, se eu removo esse trecho do código:

	$("#hexa").change(function(){
		var valor = $(this).val();
		$("#resultado").css({"background-color"}:{valor});
	});

o primeiro trecho trabalha e insere o nome da cor lá no input text, más se eu deixo os dois juntos, nenhum dos dois funciona.

 

Alguém pode me ajudar a resolver esse código e fazer isso funcionar, correto?

Grato!

[GabrielSennaMs]

@fspjonny Eu olhei e teste seu código e notei algo estranho, você utiliza o método css() do jquery passando o argumento de uma forma errada. Deve ser por esse motivo que o javascript não está funcionando!

 

Quando você passa o argumento para o método css(), você passa dois object seperados pro dois pontos, e isso vai gerar um erro de código.

$("#resultado").css({"background-color"}:{valor});

Você pode passar esse argumento como um object de 'chave : valor', onde a chave é a propriedade do css.

$("#resultado").css({"background-color":valor});

Como você só quer alterar uma unica propriedade, você pode passar dois valores string,  onde o primeiro e a propriedade e o segundo o valor.

$("#resultado").css("background-color", valor);

 

Nota: Foi adicionado no html 5 um tipo(type) de input que carregar uma tabela de cores, o tipo "color", https://www.w3schools.com/tags/att_input_type_color.asp. isso pode ajudar!

[Visitante]

1 hora atrás, GabrielSennaMs disse:

Boa noite Gabriel Senna!

Citação

Eu olhei e teste seu código e notei algo estranho, você utiliza o método css()

Se você achou estranho, calcula eu que não uso a pelo menos 1 ano.

 

Sim, eu fiz porque porque o JQuery suporta essa forma para que se possa passar várias propriedades de forma bem específicos a um componente , eu inclusive tirei isso daqui: https://www.w3schools.com/jquery/jquery_css.asp

1 hora atrás, GabrielSennaMs disse:

Quando você passa o argumento para o método css(), você passa dois object seperados pro dois pontos, e isso vai gerar um erro de código.

$("#resultado").css({"background-color":valor});

Como você só quer alterar uma unica propriedade, você pode passar dois valores string,  onde o primeiro e a propriedade e o segundo o valor.

Esta forma sugerida abaixo também não funciona, já havia testado antes

1 hora atrás, GabrielSennaMs disse:

$("#resultado").css("background-color", valor);

Sim, tô ciente dessa atualização, mas não resolve meu caso!

Citação

Nota: Foi adicionado no html 5 um tipo(type) de input que carregar uma tabela de cores, o tipo "color", https://www.w3schools.com/tags/att_input_type_color.asp. isso pode ajudar!

 

 

Dá mais uma olhada e veja que são 2 códigos JQuery apontando uma mesmo objeto na tela, conforme expliquei acima, será que pode se isso?...mas são propriedades diferentes uma é o valor do input e a outra altera a cor de fundo do mesmo input....não sei como fazer tudo em um único código, tô destreinado de JQuery, há um bom tempo e agora que tô precisando só para essa funçãozinha dá dando essa dor de dente aí....

 

Mas obrigado por olhar!

adicionado 4 minutos depois

Uma outra coisa que não comentei e não sei se voce notou...

Citação

$("#resultado").css({"background-color":valor});

valor é o nome de uma variável, ela é quem vai receber lá dos inputs a cor em valor hexadecimal e passar como um parâmetro para dentro de query e esta deveria mudar a cor de fundo do input de exibição.

[GabrielSennaMs]

@fspjonny

3 horas atrás, fspjonny disse:

Sim, eu fiz porque porque o JQuery suporta essa forma para que se possa passar várias propriedades de forma bem específicos a um componente , eu inclusive tirei isso daqui: https://www.w3schools.com/jquery/jquery_css.asp

 

Bom olha bem o argumento passado pra função css() 

// Inválido {"background-color"}:{valor}
// Correto {"background-color": valor}

 

3 horas atrás, fspjonny disse:

Dá mais uma olhada e veja que são 2 códigos JQuery apontando uma mesmo objeto na tela, conforme expliquei acima, será que pode se isso?

Bom eu fiz um teste usando o seu código com a modificação acima e ele funcionou sem problema.

 

Se possivel verifica o console de erros e tira um print pra gente dar uma olhada.

 

Uma duvida que me ocorreu aqui, você utiliza o método change, para o input emitir esse evento é necessario que precione entrer, se você está esperando um evento change ao finalizar a digitação ele não vai emitir. Pra esses casos não seria melhor utilisar um evento de keyboard, como keyup, keydown ou keypress.

[Visitante]

9 horas atrás, GabrielSennaMs disse:

@fspjonny

 

Bom olha bem o argumento passado pra função css() 

// Inválido {"background-color"}:{valor}
// Correto {"background-color": valor}

Bom dia Gabriel!, ainda no mesmo link, só queria lhe mostrar corrigindo eu errei mesmo olhei uma coisa e fiz outra, é esse trecho aqui que eu peguei, tirei um print lá da página. Voltei aqui agora e corrigi a minha resposta, muito obrigado!

 

Obrigado mais uma vez pela ajuda!

adicionado 43 minutos depois

Bom dia a todos!

O problema foi resolvido!

O erro era a minha variável para receber o valor, dos dois códigos ambas as variáveis se chamavam igualmente valor(um erro besta meu), quando mudei para valor1 e valor2, funcionou na hora.

Vejam o código em html que fiz aqui a gora de teste:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">	
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>	
<title>Documento sem título</title>
<script type="text/javascript">
	
	$(document).ready(function(){
		
		$('#box1').change(function(){
			
			var valor1 = $(this).val();
			$('#resultado').val(valor1);
		});


		$('#box2').change(function(){
			
			var valor2 = $(this).val();
			$('#resultado').css({"background-color":valor2});
		});
		
	});
</script>
</head>
<body>
	
<div class="jumbotron m-5">
  
  <div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text" id="">First and last name</span>
  </div>
  <input type="text" class="form-control" id="box1">
  <input type="text" class="form-control" id="box2">
</div>	

	<div class="mt-5">
		<label>Resultado</label>
		<input type="text" class="form-control"  style="max-width: 18em; text-align:center; color: #ffffff" id="resultado" readonly>
	</div>
</div>	

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

O resultado na tela é este aqui.

e outra cor.

 

Muito obrigado ao colega @GabrielSennaMs, pela disponibilidade em me ajudar!