Question

我在这里输入了一个输入类型=“颜色”的例子：

http://jsfiddle.net/u3at1s8f/

HTML

<body id="bg">
  <table>
    <tr>
      <td class="one">
        <input type="color" id="inputcol" />
      </td>
      <td id="tdcol" class="two">
        Change colour
      </td>
    </tr>
    <tr>
      <td class="one">
        ipsum
      </td>
      <td class="two">
        lorem
      </td>
    </tr>
  </table>
</body>

CSS

input {
  border: 0;
  padding: 0;
  margin: 0;
}

table {
  border-collapse: collapse;
  background: red;
}

table tr td {
  border: 1px solid white;
  padding: 5px;
  text-align: center;
  color: white;
}

#inputcol:hover, #tdcol:hover {
  cursor: pointer;
}

JS

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

$("#inputcol").on("change", function() {
  $(".one").css("background-color", $("#inputcol").val());
});

$("#tdcol").on("click", function() {
  /* color-function */
});

我想在div / td中使用此功能的原因是因为我想删除按钮的所有边框，并且还能够在其上放置文本。现在，按钮周围有一个奇怪的白色和灰色边框，没有文字。

这可以通过使用javascript函数在div / td上模拟这种行为吗？

Answer 1

input type=color是浏览器依赖的功能http://caniuse.com/#feat=input-color。

我会使用更可靠的jQuery插件。简单的谷歌搜索给了我https://github.com/PitPik/tinyColorPicker，http://www.dematte.at/colorPicker/和其他许多

如果您不喜欢输入的边框，只需更改该输入的css即可。

Answer 2

您可以尝试使用标签来实现此目的。请参阅Jsfiddle中更新的示例：http://jsfiddle.net/u3at1s8f/1/

         <label for=color>Change color
               <input type=color id=color style="position: absolute; top: -100%">
         </label>

Answer 3

或者您可以在另一个（可能隐藏的）click

上触发input type="color"事件

$("#tdcol").on("click", function() {
  /* color-function */
  $("#inputcol2").click();
});

使用javascript / jquery创建<div>或与<input type =“color”/>具有相同效果

3 个答案: