Question

我正在制作一个可以预览结果的表单。我做到了这个：

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/

新修改

Answer 1

在jQuery中使用change事件：

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

http://jsfiddle.net/j27Bu/

Answer 2

使用此代码 -

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

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

Answer 3

使用on keyup，它会在输入时改变颜色。

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

    });

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

Answer 4

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

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

顺便说一下：

~~输入中的颜色类型不存在~~
别忘了关闭输入元素 /＆gt;

HTML5颜色选择更改范围颜色

4 个答案: