记录jquery.colorpicker组件快速实现文本框取色功能

老蒋需要完成一个软件功能的前端，其中一项是实现表单的颜色取色功能，如果是直接输入颜色肯定大部分用户是不会的，为了体验较好肯定是直接有取色模块选择。默认的input 是带有color Type属性的，但是这样的属性体验也不够好。

这里老蒋搜索到来自"https://github.com/mumuy/widget"可以实现不错的前端功能，这里有jquery-colorpicker扩展支持颜色选择器设置。于是根据文档可以实现这样的效果。

这个效果是不错不错？那如何实现的呢？

1、JS引用

script type="text/javascript" src="https://jquerywidget.com/public/script/jquery.min.js"> /script>
script type="text/javascript" src="https://jquerywidget.com/code/jquery.colorpicker.js"> /script>

这里我是调用官方的，我们自己可以放置本地，官方的速度很慢。

2、应用脚本

script type="text/javascript">
$('input[type="color"]').colorpicker({ hoverChange:true} );
/script>
input type="text" value="#00f000" size="15"/>
span id="test"> /span>

script type="text/javascript">
$('input[type="text"]').colorpicker({
'onSelect':function(color){
$('#test').text('颜色修改为：'+color);
}
} );
/script>

对应的样式我们自己修改。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！