透明颜色输入

Question

是否可以使用内置选择透明颜色

<input type="color">

我还没有找到可以做到这一点的滑块。我需要检查一些额外的选项吗？

Answer 1

AFAIK 没有使用

<input type="color">

进行透明颜色拾取的选项，但您可以做的是为 alpha 设置另一个输入，并设置颜色输入的不透明度，如下所示：

function updateColorAlpha (alpha) {
    document.getElementById('color').style.opacity = alpha;
}

<input type="color" id="color">
<input type="range" id="alpha" onchange="updateColorAlpha(this.value);" min="0" max="1" step="0.1" value="1">

Answer 2

我认为这在本地是不可能的。颜色选择器仅返回十六进制代码，无法表示透明度。您需要构建一些定制的东西（或者有一个颜色选择器和一个透明度选择器，并自己在幕后进行计算）。

有关更多信息，请参阅：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color#Value

Answer 3

您可以将

<input type=range>

与

<input type=color>

一起使用来实现您的目的。没有 HTML “直接” 方式可以做到这一点。

<input type="color" oninput = "setColor()" id = "color">
<br />
<input type="range" min="0" max="1" step = "0.1" onchange = "setColor()" id = "opacity" value = "1">
<div id = "result" style = "height:50px; width:50px;">
</div>

<script>
    function setColor() {
        var color = document.getElementById('color').value;
        var opacity = document.getElementById('opacity').value;
        document.getElementById('result').style.background = color;
        document.getElementById('result').style.opacity = opacity;
    }
    setColor();
</script>

您可以通过 Javascript 从输入类型范围中获取所需的不透明度值，然后在结果元素上设置颜色和不透明度（本例中为

div

）

请注意，如果您需要更多 “可定制” 解决方案，您可以在 Picker.js

尝试 jQuery 插件

Answer 4

通过prompt和dataset

实现代码更少的方法

<input type="color" onchange="(e=>e.dataset.alpha = prompt('alpha'))(this)">

示例

<input type="color" value="#ffff00"
       onchange="(e=>e.dataset.alpha = prompt('alpha'))(this)"
>
<!-- 👇 just for test -->
<br>
<button>Get Result</button>
<script>
   document.querySelector("button").onclick = () => {
    const e = document.querySelector("input")
    console.log(e.value, e.dataset.alpha)   
   }
</script>

另外，如果想更简洁的直接访问alpha，也就是

e.dataset.alpha =>

e.alpha

,

您可以使用Proxy来协助。

<input type="color" value="#ffff00"  
  data-alpha="transparent" 
  onchange="(e=>e.dataset.alpha = prompt('alpha'))(this)">
<button onclick="getResult()">get result</button>

<script>
function ColorEx(inputColorElem) {
  return new Proxy(inputColorElem, {
    get(target, key) {
      return key!=="alpha" ? target[key] : target.dataset.alpha
    }
  })
}

function getResult() {
  const e = new ColorEx(document.querySelector("input[data-alpha]"))
  console.log(e.value, e.alpha)
}
</script>