最后输入字段当前颜色

Question

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

像这样：

以下是我的尝试：

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中将当前颜色作为背景但是如何将它放在输入字段的末尾？

Answer 1

使用CSS进行调整就是答案： https://css-tricks.com/absolute-positioning-inside-relative-positioning/

创建一个css文件，将这样的内容添加到文档的头部：

<link rel="stylesheet" href="css/aFile.css">

然后在你的css创建选择器，如

.forminput{
 position:relative;
}

同样指定＆＃34;职位：绝对＆＃34;对于forminput的孩子们。 最后，使用left和right来定位这些元素。 当然你也可以使用浮点数：http://www.w3schools.com/css/css_float.asp

Answer 2

只需将颜色支架放在输入旁边（与输入相同的高度），然后在输入更改时将该值作为背景颜色传递。要在颜色占位符旁边放置输入，请浮动两个元素。您可以使用clear: both|left|right或某些clear-fix css作为父级，以获取内部浮动元素的完整空间。

$(document).ready(function() {
  $('.color').change(function() {
    $(this).closest('label').find('.current_color').css('background-color', $(this).val());
  });
});

.current_color {
  display: inline-block;
  float: left;
  width: 20px;
  height: 30px;
  border: 1px solid #ddd;
}
#hexcolor {
  float: left;
  height: 20px;
  padding: 5px;
}
label {
  display: block;
  padding: 5px;
  clear: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  Primary color:
  <br/>
  <input type="text" id="hexcolor" class="color" placeholder="#fff | #ffffff | white | rgba(255, 255, 255, 1) ..." />
  <div class="current_color"></div>
</label>
<label>
  Secundary color:
  <br/>
  <input type="text" id="hexcolor" class="color" placeholder="#fff | #ffffff | white | rgba(255, 255, 255, 1) ..." />
  <div class="current_color"></div>
</label>

Answer 3

  

使用 float：left

见这个例子

示例： http://jsfiddle.net/kevalbhatt18/fpws88pw/

<强> CSS：

的

的

.current_color{
    height:21px;
    width:21px;
    background:red;
    float:left;
}
input{
    float:left
}

的

Answer 4

.current_color{
    float: right;
}

Answer 5

基本上这只是一个CSS问题，只需将以下样式添加到#current_color元素

即可

<强> DEMO HERE

#current_color
{
    width:20px;
    height:20px;
    position:absolute;
    margin-left:153px
}

Answer 6

如果您希望颜色框位于输入之后，则应将HTML元素移动到输入之后。我还添加了一些CSS来对齐：

＆＃13;

＆＃13;

$(document).ready(function(){
   value = $("#hexcolor").val(); 
    $("#current_color").css("background-color", value);

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

});

＆＃13;

#hexcolor {
  vertical-align: top;
}

#current_color {
  display: inline-block;
  height: 19px;
  width: 19px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

＆＃13;

＆＃13;

＆＃13;

Answer 7

通过使用相对定位并覆盖弹出颜色选择器，您可以在不使用浮动的情况下将项目保持在适当位置。

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

.color-container {
  position: relative;
}
.color-viewer {
  display: inline-block;
  position: relative;
  right: 5px;
  top: 6px;
  width: 20px;
  height: 20px;
}
.iris-picker.iris-border {
  position: absolute;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://automattic.github.io/Iris/javascripts/iris.min.js"></script>
<label class="formlabel">Background color:</label>
<div class="forminput color-container">

  <input name="bg_color" id="hexcolor" value="#bada55" type="text" />
  <div class="color-viewer" id="current_color"></div>
</div>

Answer 8

display:table是解决此问题的好方法： demo 。

HTML：

<div class="color">
    <span><input type="text" class="current-color" value="#333333"/></span>
    <span class="preview-color"></span>
</div>

CSS：

.color {
    display: table;
    border-collapse: separate;
}

.color > span {
    display: table-cell;
}

.current-color {
    max-width: 100px;
}

.preview-color {
    width: 20px;
}

Answer 9

这是你想要的那个;

DEMO：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;
}

Answer 10

你在找这个吗？

HTML

<input type="text" id="hexcolor" value="#444444" />
<div style="display:inline" id="current_color">frame</div>

JAVASCRIPT

$(document).ready(function(){
   value = $("#hexcolor").val(); 
    //$("#current_color").css("background-color", value);

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

});

JSFIDDLE