是否可以在输入类型中调用预设的颜色调色板而不是标准调色板？

问题描述：

我试图做一个颜色选择器，其中的颜色是从标准的内置系统调色板中选择的。是否可以在输入类型中调用预设的颜色调色板而不是标准调色板？

是否可以制作我自己选择的有限颜色集，然后将其用作输入颜色方法中的调色板？

<!DOCTYPE html> 
    <html> 
    <head> 
    <title>Page Title</title> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    </head> 
    <body> 

    <!-- CLICK TO CHANGE COLOR --> 
    <input type="color" value="#e73d18"> 

    <!-- Image Credit --> 


    </body> 
    </html>

的style.css：

body { 
    background-image: url(http://gecko.sashaz.com/green_Gecko.jpg)no-repeat; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    margin: 0; 
} 

input { 
    /* removes default styling from input color element */ 

    padding: 0; 
    border: none; 
    /* makes input (color swatch) 100% size of container */ 

    position: absolute; 
    width: 100%; 
    height: 100%; 
    /* mix blend mode makes the color of the swatch alter the image behind it. */ 

    mix-blend-mode: hue; 
    cursor: pointer; 
} 
/* removes default styling from input color element */ 

::-webkit-color-swatch { 
    border: none; 
} 

::-webkit-color-swatch-wrapper { 
    padding: 0; 
} 

::-moz-color-swatch, 
::-moz-focus-inner { 
    border: none; 
} 

::-moz-focus-inner { 
    padding: 0; 
} 
/* Image Credit */ 

a { 
    position: absolute; 
    bottom: 10px; 
    right: 10px; 
    color: skyblue; 
    background: black; 
    display: block; 
    padding: 3px 8px; 
    font-size: 18px; 
    text-decoration: none; 
}

_“是有可能使有限的颜色集我自己选择的，然后用它作为输入法的颜色调色板？” _不能肯定正确解释的要求？预期的结果是什么？限制颜色选择选项？ – guest271314

是的，确切地说，如何限制他们到我的选择？ –

答

尝试限定阵列内接受的颜色，使用onfocus事件，以检查是否选择的颜色是有效的，如果不是，SETT颜色#ffffff

var input = document.querySelector("input"); 
 

 
var colors = ["#e73d18", "#cc5522", "#bb7788", "#dd3344"]; 
 

 
input.onfocus = function(e) { 
 
    if (colors.indexOf(this.value) === -1) { 
 
    this.value = "#ffffff"; 
 
    this.focus() 
 
    } 
 
}

body { 
 
    background-image: url(http://gecko.sashaz.com/green_Gecko.jpg)no-repeat; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    margin: 0; 
 
} 
 
input { 
 
    /* removes default styling from input color element */ 
 
    padding: 0; 
 
    border: none; 
 
    /* makes input (color swatch) 100% size of container */ 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    /* mix blend mode makes the color of the swatch alter the image behind it. */ 
 
    mix-blend-mode: hue; 
 
    cursor: pointer; 
 
} 
 
/* removes default styling from input color element */ 
 

 
::-webkit-color-swatch { 
 
    border: none; 
 
} 
 
::-webkit-color-swatch-wrapper { 
 
    padding: 0; 
 
} 
 
::-moz-color-swatch, 
 
::-moz-focus-inner { 
 
    border: none; 
 
} 
 
::-moz-focus-inner { 
 
    padding: 0; 
 
} 
 
/* Image Credit */ 
 

 
a { 
 
    position: absolute; 
 
    bottom: 10px; 
 
    right: 10px; 
 
    color: skyblue; 
 
    background: black; 
 
    display: block; 
 
    padding: 3px 8px; 
 
    font-size: 18px; 
 
    text-decoration: none; 
 
}

<input type="color" value="#e73d18">

可替代地，使用datalist ，onchange事件

var input = document.querySelector("input"); 
 

 
var colors = ["#e73d18", "#cc5522", "#bb7788", "#dd3344"]; 
 

 
input.onchange = function(e) { 
 
    if (colors.indexOf(this.value) === -1) { 
 
    this.value = "#ffffff"; 
 
    this.focus() 
 
    } 
 
}

body { 
 
    background-image: url(http://gecko.sashaz.com/green_Gecko.jpg)no-repeat; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    margin: 0; 
 
} 
 
input { 
 
    /* removes default styling from input color element */ 
 
    padding: 0; 
 
    border: none; 
 
    /* makes input (color swatch) 100% size of container */ 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    /* mix blend mode makes the color of the swatch alter the image behind it. */ 
 
    mix-blend-mode: hue; 
 
    cursor: pointer; 
 
} 
 
/* removes default styling from input color element */ 
 

 
::-webkit-color-swatch { 
 
    border: none; 
 
} 
 
::-webkit-color-swatch-wrapper { 
 
    padding: 0; 
 
} 
 
::-moz-color-swatch, 
 
::-moz-focus-inner { 
 
    border: none; 
 
} 
 
::-moz-focus-inner { 
 
    padding: 0; 
 
} 
 
/* Image Credit */ 
 

 
a { 
 
    position: absolute; 
 
    bottom: 10px; 
 
    right: 10px; 
 
    color: skyblue; 
 
    background: black; 
 
    display: block; 
 
    padding: 3px 8px; 
 
    font-size: 18px; 
 
    text-decoration: none; 
 
}

<label> 
 
    <input list="colors" type="color" value="#e73d18" /> 
 
</label> 
 
<datalist id="colors"> 
 
    <option value="#e73d18"></option> 
 
    <option value="#cc5522"></option> 
 
    <option value="#bb7788"></option> 
 
    <option value="#dd3344"></option> 
 
</datalist>

谢谢。那么我应该在输入前在脚本中添加脚本吗？ –

我刚换了，它的工作原理！非常感谢你的帮助！ –

我可以再问一个问题吗？如何定位此选择器，使其在coursor下面弹出，而不是在左上角？ –

答

我不认为你可以只用HTML做到这一点，但你绝对可以用JavaScript实现这一目标。退房https://bgrins.github.io/spectrum/ 只显示调色板看起来像你想要的。

是否可以在输入类型中调用预设的颜色调色板而不是标准调色板？

相关推荐