获取更改时输入文本的值答案

【问题标题】：get value of input text on change获取更改时输入文本的值
【发布时间】：2013-02-01 08:57:34
【问题描述】：

我有这个带有 jquery colorpicker 的代码，onchange input #color 以十六进制显示输入值；如何获取更改时的颜色值？

<body>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="swatch" class="ui-widget-content ui-corner-all"></div>
<input type="text" id="color">

脚本：refreshSwatch 是一个获取滑块颜色值的函数，它可以工作；

 function refreshSwatch(evt, ui) {
    var red = $("#red").slider("value"),
            green = $("#green").slider("option", "value"),
            blue = $("#blue").slider("value"),
            hex = hexFromRGB(red, green, blue);
    $("#swatch").css("background-color", "#" + hex);
    $("#color").val("#" + hex);
}

我想在更改时获取颜色输入值，然后更改背景颜色，但它不起作用：

 $(document).ready(function () {
    $("#color").change(function(){
        $("body").css("background-color", $("#color").val());
    });
})

http://jsbin.com/alefok/18/edit

【问题讨论】：

标签： jquery input color-picker

【解决方案1】：

查看工作箱：http://jsbin.com/alefok/34/edit

改变了两件事：

$("#colour").val("#" + hex).change(); 在这个函数中：function refreshSwatch(){}

                       //--^^^^^^^^^-------triggered the change above here.

这里：

$("#colour").change(function(){
     $("body").css("background", $("#colour").val());
}).change(); //<-----trigger the change here

【讨论】：

【解决方案2】：

当您在回调范围内时，您可以使用this 来引用有问题的项目。这主要是一个建议，你的代码工作得很好。您提供的jsbin 示例中的主要问题是“颜色”（或“颜色”）这个词的拼写方式存在差异。

HTML

<input type="text" id="color">

JS

$(document).ready(function () {
    $("#color").change(function(){
        $("body").css("background-color", $(this).val());
    });
});

jsbin

【讨论】：

【解决方案3】：

试试这个对你有用

function refreshSwatch(evt, ui) {
    var red = $("#red").slider("value"),
            green = $("#green").slider("option", "value"),
            blue = $("#blue").slider("value"),
            hex = hexFromRGB(red, green, blue);
    $("#swatch").css("background-color", "#" + hex);
    $("#color").val("#" + hex);
    $("body").css("background-color", $("#colour").val());
}

【讨论】：

【解决方案4】：

在您的链接中：

http://jsbin.com/alefok/18/edit

您的 HTML 中有错字：

<input type="text" id="colour">

但是您使用的是选择器$("#color")

【讨论】：

【解决方案5】：

试试这个编辑

function hexFromRGB(r, g, b) {
        var hex = [
            r.toString( 16 ),
            g.toString( 16 ),
            b.toString( 16 )
        ];
        $.each( hex, function( nr, val ) {
            if ( val.length === 1 ) {
                hex[ nr ] = "0" + val;
            }
        });
        return hex.join( "" ).toUpperCase();
    }
    function refreshSwatch(evt, ui) {

        var red = $( "#red" ).slider( "value" ),
                green = $( "#green" ).slider( "option", "value" ),
                blue = $( "#blue" ).slider( "value" ),
                hex = hexFromRGB( red, green, blue );

        $( "body" ).css( "background-color", "#" + hex );   //Here give body not div
        $("#colour").val("#" + hex);
    }
    $(function() {
        $( "#red, #green, #blue" ).slider({
            orientation: "horizontal",
            range: "min",
            max: 255,
            value: 127,
            slide: refreshSwatch,
            change: refreshSwatch
        });
        $( "#red" ).slider( "value", 255 );
        $( "#green" ).slider( "value", 140 );
        $( "#blue" ).slider( "value", 60 );
    });
});

【讨论】：