Question

是否可以显示使用颜色标签选择的颜色的十六进制代码。

如果可以的话，如何实现。

这是我的代码段：

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>

也可以使用任何脚本。

仅使用CSS和jquery可以做到吗？

谢谢。

Answer 1

添加一个onchange事件监听器，以将值设置为span元素

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>

Answer 2

为<span>元素分配一个类名称，然后使用您添加到<span>的类名称的类选择器为它设置颜色的值。

使用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>

使用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>

Answer 3

尝试一下

document.querySelector('span').innerHTML = document.getElementById('color').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>

Answer 4

    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>

在输入中添加“ id”以通过“ getElementById”进行查找，然后使用侦听器或函数进行工作

在颜色标签上方显示所选颜色的代码

4 个答案: