jquery - 最后输入字段的当前颜色

我想在输入字段的末尾显示当前颜色。

像这样：



这是我尝试过的：

的HTML

<label class="formlabel">Background color:</label>
<div class="forminput"><div class="forminput" id="current_color"></div><input name="bg_color" id="hexcolor" value="#bada55" type="text" /></div>

jQuery的

value = $("#hexcolor").val();
$("#current_color").css("background-color", value);
$('#hexcolor').iris({
     change: function(event, ui){
          $("#current_color").css("background-color", this.value);
      }
});

使用上面的代码的结果：



我将当前颜色作为div中的背景，但是如何将其放在输入字段的末尾？

最佳答案

这正是您想要的那个。

演示：http://jsfiddle.net/yeyene/bqrfts75/4/



的CSS

.forminput {
    float:left;
    background:#e8e8e8;
    padding:5px;
}
#hexcolor {
    float:left;
    width:100px;
    padding:5px 3px;
    font-size:12px;
    line-height:12px;
    border:1px solid #dfdfdf;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
#current_color {
    float:right;
    width:21px;
    height:21px;
    padding:3px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

关于jquery - 最后输入字段的当前颜色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30596679/