CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Viira
Viira

Reputation: 3911

Displaying the selected color's code on top of the color tag

Is it possible to display the color's hex code that has been selected using the color tag.

If so how to achieve that.

Here's my code snippet:

input
{
padding:0;
border:none; 
border-color:transparent;
height:40px; 
width:150px;
position:relative;
box-shadow:none;
}

span
{
position:absolute;
color:#fff;
left:20px;
padding-top:10px;
text-align:center;
}
<input type="color" name="color" value="#0a7ea4">
<span><!--I want the color name here--> color name</span>

Any scripts also can be used.

Is this possible by only using css and jquery?

Thank you in advance.

Upvotes: 0

Views: 71

Answers (4)

McRist
McRist

Reputation: 1748

Add an onchange event listener, to set the value to the span element

function getColorCode() {
  document.getElementById('color_name').innerHTML = event.currentTarget.value
}
input  {
  padding:0;
  border:none; 
  border-color:transparent;
  height:40px; 
  width:150px;
  position:relative;
  box-shadow:none;
}
span {
  position:absolute;
  color:#fff;
  left:20px;
  padding-top:10px;
  text-align:center;
}
<input id="input_color" type="color" onchange="getColorCode(event)" name="color" value="f025cb">
<span id="color_name"> color name</span>

Upvotes: 3

Edgardo Amaya
Edgardo Amaya

Reputation: 21

    var theInput = document.getElementById("color");
    var theColor = theInput.value;
    theInput.addEventListener("input", function() {
    document.getElementById("displaycolor").innerHTML = theInput.value + " HEX code";
    }, false);
input
{
padding:0;
border:none; 
border-color:transparent;
height:40px; 
width:150px;
position:relative;
box-shadow:none;
}

span
{
position:absolute;
color:#fff;
left:20px;
padding-top:10px;
text-align:center;
}
<input type="color" id="color" name="color" value="f025cb"  >
<span id="displaycolor"><!--I want the color name here--> color name</span>

add the "id" in input to find by "getElementById", then use a listener or a function to work

Upvotes: 1

martinho
martinho

Reputation: 1016

Try this

document.querySelector('span').innerHTML = document.getElementById('color').value - this line sets the default value.

The event is aware of when there is any change to change the span value.

document.getElementById('color').addEventListener('change', function (){
  document.querySelector('span').innerHTML = this.value;
});


document.querySelector('span').innerHTML = document.getElementById('color').value

document.getElementById('color').addEventListener('change', function (){
  document.querySelector('span').innerHTML = this.value;
});
input {
  padding:0;
  border:none; 
  border-color:transparent;
  height:40px; 
  width:150px;
  position:relative;
  box-shadow:none;
}

span {
  position:absolute;
  color:#fff;
  left:20px;
  padding-top:10px;
  text-align:center;
}
<input type="color" name="color" value="#0a7ea4" id="color">
<span></span>

Upvotes: 1

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

Assign a class name to the <span> element and then set the value of the color to it using the class selector for class name you have added to <span>.

using jQuery

$('.color-name').text($('[name="color"]').val());
input {
  padding: 0;
  border: none;
  border-color: transparent;
  height: 40px;
  width: 150px;
  position: relative;
  box-shadow: none;
}

span {
  position: absolute;
  color: #fff;
  left: 20px;
  padding-top: 10px;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="color" name="color" value="#0a7ea4">
<span class='color-name'></span>

using JavaScript

var colorVal = document.querySelector('[name="color"]').value;
document.querySelector('.color-name').innerText = colorVal;
input {
  padding: 0;
  border: none;
  border-color: transparent;
  height: 40px;
  width: 150px;
  position: relative;
  box-shadow: none;
}

span {
  position: absolute;
  color: #fff;
  left: 20px;
  padding-top: 10px;
  text-align: center;
}
<input type="color" name="color" value="#0a7ea4">
<span class='color-name'></span>

Upvotes: 1

Related Questions