HTML5 颜色选择更改跨度颜色答案

【问题标题】：HTML5 color pick change span colorHTML5 颜色选择更改跨度颜色
【发布时间】：2013-05-18 13:23:18
【问题描述】：

我正在制作一个表单，您可以在其中预览结果。我做了这个：

HTML：

<input type="color" id="color" />
<span id="colorchange">Foo</span>

JS：

 $(document).ready(function() {
    $("#color").click(function() {
         var color= $(this).attr('val'); // Not sure about this
         $("#colorchange").css("color","+color+");
    });
 });

这没有用。有什么想法吗？

谢谢！

编辑： jsfiddle 在这里：http://jsfiddle.net/xgm34/

新编辑

【问题讨论】：

在 jsfiddle 中添加你的代码 ....
添加到 jsfiddle，查看我的编辑
目前输入类型颜色只适用于Chrome和Opera。如果您想要跨浏览器兼容性，我认为您应该考虑使用 jquery 插件。
没关系。无论如何我都会自己使用它，但感谢您的提示！也许有一天，像 Internet Explorer 这样的浏览器会向前发展 :)
我更新了一些新概念，看看吧

标签： javascript jquery html forms colors

【解决方案1】：

在 jQuery 中使用 change 事件：

$("#color").on('change', function() {
    $("#colorchange").css({"color":$(this).val()});
});

http://jsfiddle.net/j27Bu/

【讨论】：

【解决方案2】：

使用此代码 -

$(document).ready(function() {
    $("#color").change(function() {
        var color = $(this).val();
        $("#colorchange").css("color", color);
    });
});

看到这个小提琴 - http://jsfiddle.net/xgm34/10/

【讨论】：

【解决方案3】：

在键盘上使用它会在打字时改变颜色。

 $("#color").on('keyup',function() {
        $("#colorchange").css({"color":$(this).val()});

    });

http://jsfiddle.net/tamilmani/j27Bu/1/

【讨论】：

【解决方案4】：

你忘了关闭一些大括号和括号

$(document).ready(function() {
$("#color").click(function() {
        $("#colorchange").css("color","+color+");
  });
});

顺便说一句：

~~输入的颜色类型不存在~~
别忘了关闭输入元素/>

【讨论】：

"The color type in input doesn't exist" - w3.org/TR/html-markup/input.color.html