如何在输入中添加一个小方块以使用颜色选择器预览颜色答案

【问题标题】：How to add a little square into input for preview a color with colorpicker如何在输入中添加一个小方块以使用颜色选择器预览颜色
【发布时间】：2021-04-11 02:34:00
【问题描述】：

我想在我的输入文本中添加一个小方块，我可以根据输入值更改颜色，就像这张照片：

我必须使用bootstrap colorpicker

此时我的代码中有这个：

   <div class="form-group row">
        <label for="theme-color"
           class="col-sm-2 col-form-label font-weight-bold">{{__('template.edit.site_identity.description')}}</label>
        <div class="col-sm">
            <div id="demo">
               <input type="text"
                    id="theme-color"
                    class="form-control @error('theme-color') is-invalid @enderror"
                    name="theme-color"
                    value="#FFFFFF">
               @error('theme-color')
               <span class="input-group-append">
                      <span
                      class="input-group-text colorpicker-input-addon"><i></i></span>
               </span>
               <span class="invalid-feedback" role="alert">
            <strong>{{ $message }}</strong>
        </span>
                 @enderror
            </div>
        </div>
   </div>

和javascript：

<script>
    $('#theme-color').colorpicker();
</script>

如何添加小方块并根据“主题颜色”输入的值更改颜色？

【问题讨论】：

您可以使用：<input type="color">。不需要图书馆！

标签： javascript html css input

【解决方案1】：

您可以使用 CSS 设置包装颜色输入类型的父元素的样式。然后使用 JS 将文本输入值更改为 color-theme on change 使用事件侦听器。

样式注意事项：根据您输入的高度，您可以设置尾随元素的样式，<span>在我的示例中标记 , 看起来与图片片段中的颜色选择器一模一样。您可能需要使用这些元素的样式。我还添加了一些 flex display 来轻松地在其父元素中居中。

let color = document.querySelector('.colorPick')
let themeColor = document.querySelector('#theme-color')

const setColor = (colorSel, textSel) => {
  // change the value to the default color
  themeColor.value = color.value
  // event listener to change the text input value when the pickers value changes
  color.addEventListener('change', () => {
    return themeColor.value = color.value
  })
}

setColor(color, themeColor)

#demo {
  font-size: 24px;
  height: 24px;
  padding: 0;
  display: flex;
  align-content: center;
}

#theme-color {
  border: 1px solid #d4d4d4;
}

#theme-color:focus {
  outline: none !important;
  border: 1px solid #d4d4d4;
}

.picker {
  display: flex;
  align-content: center;
  align-items: center;
  height: 22px;
  width: 32px;
  border-radius: 0 4px 4px 0;
  border: 1px solid #d4d4d4;
  background-color: #eee;
  padding-left: 1px;
  margin-left: -1px;
}

.colorPick {
  height: 16px;
  width: 31px;
  border: none;
}

<div class="form-group row">
  <label for="theme-color" class="col-sm-2 col-form-label font-weight-bold"></label>
  <div class="col-sm">
    <div id="demo">
      <!--// remove readonly attribute if you want users to be able to type in the color themselves //-->
      <input type="text" id="theme-color" class="form-control @error('theme-color') is-invalid @enderror" name="theme-color" value="#FFFFFF" readonly>
      <span class="picker"><input class="colorPick" type="color"></span>

    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

使用输入类型颜色和 oninput JavaScript 事件。这意味着无论何时更改或输入颜色，都会执行某些操作。让我们这样做：

function update() {
  var input_color = document.getElementById('yourColorPicker').value;
  document.getElementById('text_output').value = input_color;
  document.getElementById('output').innerHTML = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
  document.getElementById('output').style.backgroundColor = input_color;
}

#output {
  display:block;
  height: 15% !important;
  width: 15% !important;
}

input[type=text] {
  font-family:monospace;
  width: 100%;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>demo</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
</head>

<body>
  <span>Select the color:</span>
  <input type="color" id="yourColorPicker" oninput="update();" />
  <div id="output">Not set! Click the color picker to continue.</div>
  <p>Your hex color code:</p>
  <input type="text" id="text_output" value="Pick a color, and I promise there'll be some hex code here." />
</body>

</html>

此程序使用所选颜色更新文本输入字段和 div。不需要外部库。

【讨论】：