通过HTML/CSS/JavaScript实现5种可能的颜色？

Question

我的电子商店有一个模块，它允许用户选择一个项目，并使用可以移动的彩色文本对其进行个性化设置。文本被输入到文本字段中，文本的颜色通过JScolor.js交互的元素来选择。选择颜色后，文本会自动更改其颜色。

​

​

问题是我的物理个性化机器只支持5种基本颜色的打印。因此，有没有办法将调色板限制为这5种颜色，或者以其他方式/ .js / html / css实现该效果？

Answer 1

如果你想使用HTML5调色板，你必须在字段中对这5种颜色进行标准输入验证，这对用户来说可能是一个巨大的可用性问题，否则，真的没有办法说‘嘿，调色板，只显示这些颜色’。你可以做的是用允许的颜色做5个样本，然后让用户以这种方式选择它。您可以设置一些单选按钮的样式来完成此操作，以及实现包含5个选项的可选字段的许多其他方法。

Answer 2

具有5个颜色选项的范围滑块

html

<div id="results"></div>

<div data-role="rangeslider">
    <label for="range-1a">color slider (<i></i>): <span></span></label> 
    <input name="range-1a" id="range-1a" min="0" max="100" value="0" type="range" />
    <label for="range-1b">Rangeslider:</label>
    <input name="range-1b" id="range-1b" min="0" max="100" value="100" type="range" />
</div>

js

$(function () {
    $("#results").css({
        "display" : "block",
        "width" : "99%",
        "height" : "50px",
        "border" : "1px solid gold"
    });
    $("[data-role='rangeslider'] a")
        .filter(":last")
        .css("display", "none")
        .addBack()
        .filter(":first")
        .css({
        "border": "1px solid gold",
        "backgroundColor": "grey"
    }).attr("tabindex", 1).focus();
    $("input[name='range-1a']").on("change", function (e) {
        var color = $(this).val();
        var results = $("#results");
        if (color < 20) {       
          results.css("backgroundColor", "red");
        };       
        if (color >= 20 && color < 40) { 
          results.css("backgroundColor", "blue"); 
        };
        if (color >= 40 && color < 60) {
          results.css("backgroundColor", "green")
        };
        if (color >= 60 && color < 80) { 
          results.css("backgroundColor", "yellow")
        };  
        if (color >= 80) {
          results.css("backgroundColor", "orange") 
        };
        $("label[for=range-1a] i")
        .text($("#results")[0].style.backgroundColor);                    
        $("span")
        .text($("#results").css("background-color"))
    });
});

jsfiddle http://jsfiddle.net/guest271314/z3z7bnbd/

dep：

http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js

http://code.jquery.com/mobile/1.4.3/jquery.mobile.structure-1.4.3.min.css

http://api.jquerymobile.com/jquery-wp-content/themes/api.jquerymobile.com/style.css

Answer 3

谢谢你的建议。最后，我创建了一个下拉列表，并将这五种颜色指定为值：

<select id="tcolor" class="color">
    <option value="0000FF">Blue</option>
    <option value="000000">Black</option>
    <option value="FF0000">Red</option>
    <option value="C0C0C0">Silver</option>
    <option value="FFD700">Gold</option>
 </select>

不确定后台的编码，但这是按要求工作的。