需求:点击颜色的input框的时候,会出现拾色器的插件,将自己选择的颜色的色号赋值给input里面,在插件库里面找到了一个UI样式还比较好看的插件,作了一些修改,符合项目需要,分享出来。
找了一个拾色器插件,将colorpicker.js下载并且引用。
<script src="./colorpicker.js"></script>
参考demo:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>colorpicker</title> <script src="./colorpicker.js"></script> <style> </style> </head> <body> <div class="abc"> <h3>点击下方选择颜色</h3> <input id="color-picker"></input> </div> <button type="submit">提交</button> </body> <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> <script> new Colorpicker({ el: "color-picker", color: "#000fff", change: function(elem, hex) { console.log(elem, hex) document.getElementById("color-picker").value=hex; } }) </script> </html>