HTML表单颜色选择器

r囧r小猫 2022-06-03 06:20 359阅读 0赞

有些情况下，我们要保存对应的颜色值，比如优惠券，会员卡根据金额的不同，颜色

值也有可能不同，那么后台如何获取颜色值呢。

## 1.使用H5的color输入 ##

<input type="color" name="bgColor"/>

这样提交表单的时候，获取到的颜色值如下

bgColor='\#d39de1'

这个会弹出

![20171220192017494][]

但是并不是所有的浏览器都支持，比如IE和Safari

## 2. 使用jquery取色插件colpicker ##

官网：https://xdsoft.net/jquery-plugins/colpick/

$('#picker').colpick({
        layout:'hex', //使用hex 16进制布局 或者 'rgbhex' 或者 'rgb'
        submit:0,  //是否自动提交
        color:{r:241,g:22,b:25},//初始设置颜色
        colorScheme:'dark',  //背景颜色
        onChange:function(hsb,hex,rgb,el,bySetColor) {
           //hsb : {h: 300, s: 80, x: 56}
           //hex : 8f1d8f
           //rgb : {r: 143, g: 29, b: 143}
           //el : <span id="picker">…</span>  当前元素
           //bySetColor : 0 
        }
        }).keyup(function(){
            $(this).colpickSetColor(this.value);
        });

这个显示效果如下：

![20171220192039424][]

[20171220192017494]: /images/20220603/f9c5147654d140e4b2cfd3f9a2891d2f.png
[20171220192039424]: /images/20220603/99a0aad6a72648c09910732e870c09f1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，359人围观）

还没有评论，来说两句吧...

相关阅读

相关【前端_表单选择器】

表单选择器 ![表单选择器][5c86d16dd8ff49299110b6d8401bccde.png] 加粗为常用 :text 文本框 :passwor

╰+哭是因爲堅強的太久メ/ 2024年04月06日 13:42/ 0 赞/ 28 阅读

相关 2_4表单选择器

表单选择器关于表单项的选择器 :text :password :radio :checkbox :hidden :file :submit :input 匹配所有 in

末蓝、/ 2023年09月27日 15:09/ 0 赞/ 83 阅读

相关颜色选择器

安装 npm install vcolorpicker -S 引入 import vcolorpicker from 'vcolorpicker'

分手后的思念是犯贱/ 2022年11月20日 09:53/ 0 赞/ 169 阅读

相关 JQ表单选择器

今天跟着李炎恢老师的课程来记录一下表单选择器的学习笔记！ <form> <input type="text" name="user" value="小

刺骨的言语ヽ痛彻心扉/ 2022年08月01日 12:16/ 0 赞/ 168 阅读

相关 Jquery——Day1(Jquery基本选择器+过滤选择器+表单选择器+表单过滤器)

A、jQuery常规选择器，大体上来讲，简单选择器、进阶选择器、高级选择器 1、简单选择器，分为id选择器、元素（标签）选择器、类（class）选择器与cs

妖狐艹你老母/ 2022年07月12日 11:41/ 0 赞/ 228 阅读

相关 jQuery选择器详解(层叠选择器/过滤选择器/表单选择器)

[jQuery][] 的选择器可谓之强大无比，这里简单地总结一下常用的元素查找方法 $("\myELement") 选择id值等于myElement的元素，id值不能重

深碍√TFBOYSˉ_/ 2022年06月12日 01:58/ 0 赞/ 326 阅读

相关 jquery表单过滤选择器

1.1．表单过滤选择器表单过滤选择器是用于选取表单中的元素 :input 所有的表单元素。 :text 文本框 :password 密码框 :r

比眉伴天荒/ 2022年06月06日 06:25/ 0 赞/ 225 阅读

相关 HTML表单颜色选择器

有些情况下，我们要保存对应的颜色值，比如优惠券，会员卡根据金额的不同，颜色值也有可能不同，那么后台如何获取颜色值呢。 1.使用H

r囧r小猫/ 2022年06月03日 06:20/ 0 赞/ 360 阅读

相关 jquery表单选择器

一介绍表单选择器是匹配经常在表单内出现的元素。但是匹配的元素不一定在表单中。 jQuery 提供的表单选择器如下表所示。 <table style="border-co

布满荆棘的人生/ 2022年05月12日 00:38/ 1 赞/ 229 阅读

相关表单选择器

[http://www.w3school.com.cn/jquery/jquery\_ref\_selectors.asp][http_www.w3school.com.cn_

矫情吗；*/ 2022年01月15日 22:53/ 0 赞/ 173 阅读