时间戳

首页 > 解决方案 > 检测光谱颜色选择器何时打开

javascript - 检测光谱颜色选择器何时打开

问题描述

我正在使用光谱颜色选择器。

我有这个简单的 js 来模拟单击其他两个不相关的按钮

  document.onkeydown = function(evt) {
    evt = evt || window.event;
    if (evt.keyCode == 13) {
      send_dlg_optns();
    }
    if (evt.keyCode == 27) {
      cancel_dlg();
    }
  }

麻烦的是，如果我在颜色选择器打开时按了转义或输入，颜色选择器不会收到按键，并且会调用其他函数。有没有办法测试选择器何时打开并且可能禁用 onkeydown 直到选择器关闭？蒂亚

标签： javascripthtmlcss

解决方案

您可以使用 Spectrum 文档中描述的显示和隐藏事件来监视选择器何时打开或关闭。然后，只有在隐藏了拾音者的情况下，您才能有条件地触发其他按键事件。

这样的事情应该可以解决问题：

HTML

<div class="picker" style="display: none;">
  <input type="text" id="showPaletteOnly"/>
</div>
<button class="open_picker">Open Picker</button>

JS

let isSpectrumOpen = false;  

$('#showPaletteOnly').spectrum({
  flat: false,
  color: '#008800',
  showInput: false,
  showButtons: false,
  preferredFormat: "hex",
  show: function(tinycolor) { changeSpectrumStatus() },
  hide: function(tinycolor) { changeSpectrumStatus() },
});

function changeSpectrumStatus() {
  isSpectrumOpen = !isSpectrumOpen;
  console.log(isSpectrumOpen);
}

$(".open_picker").on("click", function() {
  $(".picker").show();
})

JSFiddle 示例

推荐阅读