logo标签列表

jQuery颜色选择器Spectrum在Internet Explorer上无法正常工作。

javascriptjqueryinternet-explorercontenteditable
10

我正在使用Spectrum作为jQuery插件，用于在contenteditable div中选择颜色。在Chrome和Firefox浏览器中，它的运行非常完美。但是在Internet Explorer浏览器中，它仅显示颜色调色板，但当我选定颜色后，没有任何变化。

然而，如果我直接以这种方式执行execCommand，它就可以工作：

$('#btn-color_font').click(function() {
    document.execCommand('foreColor', false, "#ff0000");
});

我做错了什么？请帮我解决在IE中使用它的问题。谢谢。

jsfiddle

代码片段：

<li class="main-btn">
    <a href="#" id="btn-color_font" class="wysiwyg-color-spectrum-cF">cF</a>
</li>
<li class="main-btn" >
    <a href="#" id="btn-color_background" class="wysiwyg-color-spectrum-bF">cB</a>
</li>

片段 js：

$(".wysiwyg-color-spectrum-cF").spectrum({
    showPaletteOnly: true,
    togglePaletteOnly: true,
    togglePaletteMoreText: 'more',
    togglePaletteLessText: 'less',
    color: 'blanchedalmond',
    change: function (color) {
        document.execCommand('foreColor', false, color.toHexString());
    },
    hideAfterPaletteSelect: true,
    palette: [
        ["#000", "#444", "#666", "#999", "#ccc", "#eee", "#f3f3f3", "#fff"],
        ["#f00", "#f90", "#ff0", "#0f0", "#0ff", "#00f", "#90f", "#f0f"],
        ["#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d0e0e3", "#cfe2f3", "#d9d2e9", "#ead1dc"],
        ["#ea9999", "#f9cb9c", "#ffe599", "#b6d7a8", "#a2c4c9", "#9fc5e8", "#b4a7d6", "#d5a6bd"],
        ["#e06666", "#f6b26b", "#ffd966", "#93c47d", "#76a5af", "#6fa8dc", "#8e7cc3", "#c27ba0"],
        ["#c00", "#e69138", "#f1c232", "#6aa84f", "#45818e", "#3d85c6", "#674ea7", "#a64d79"],
        ["#900", "#b45f06", "#bf9000", "#38761d", "#134f5c", "#0b5394", "#351c75", "#741b47"],
        ["#600", "#783f04", "#7f6000", "#274e13", "#0c343d", "#073763", "#20124d", "#4c1130"]
    ]
});
为什么不使用这个：http://www.ajaxtoolkit.net/ColorPicker/ColorPicker.aspx ？ - Inside Man
有趣的问题...只要在IE中单击颜色，文本选择就会消失，因此就没有文本可以更改了。请检查此链接：https://dev59.com/m2nWa4cB1Zd3GeqPzVIJ - Álvaro González
@ÁlvaroG.Vicario 好的，我会研究一下。谢谢。 - Karl
@陌生人，很抱歉，但我认为那是完全不同的语境。 - Karl
@Karl 我知道这不同，但只是建议使用一个易于使用的颜色选择器，而不会遇到任何困难。 - Inside Man
@Stranger 好的，谢谢。 - Karl
3个回答
1
这里的问题是，在你点击颜色之前，IE就失去了焦点/选择，这就是为什么它不起作用的原因。它触发了“change”事件，但由于没有选中任何内容，所以什么也没发生。
为了解决这个问题，当单击Spectrum按钮时，您必须保存选择，然后在Spectrum的“change”事件触发时恢复该选择。
像这样：
var WinSelection = (function(w, d) {
  var currentSelection = null; // create a variable to save the current selection

  function saveSelection() { // saveSelection copied from another SO answer
    if (w.getSelection) {
      sel = w.getSelection();
      if (sel.getRangeAt && sel.rangeCount) {
        return sel.getRangeAt(0);
      }
    } else if (d.selection && d.selection.createRange) {
      return d.selection.createRange();
    }
    return null;
  }

  function restoreSelection(range) { // restoreSelection copied from another SO answer
    if (range) {
      if (w.getSelection) {
        sel = w.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
      } else if (d.selection && range.select) {
        range.select();
      }
    }
  }

  return { // return an object with two public methods: saveSelection and restoreSelection
    saveSelection: function() {
      currentSelection = saveSelection();
    },
    restoreSelection: function() {
      restoreSelection(currentSelection);
    }
  };
})(window, document);

然后，在您的代码中，当按钮被点击时，您可以保存选择：

$('#wysiwyg-editor li a').click(function() {
  WinSelection.saveSelection();
});

在你的change事件中，你恢复了选择：

/* ... */
change: function (color) {
  WinSelection.restoreSelection();
  document.execCommand('foreColor', false, color.toHexString());
},
/* ... */
change: function (color) {
  WinSelection.restoreSelection();
  document.execCommand("BackColor", false, color.toHexString());
},
/* ... */

这是你的fiddle - 更新后，在IE中可以正常工作。

离开了一段时间。谢谢。 - Karl
0
想提供另一种对我有效的解决方案：
将html属性unselectable='on'添加到这三个将由spectrum插件生成的div中（在网站完成加载后执行代码）：
jQuery(".sp-replacer").attr("unselectable", "on");
jQuery(".sp-preview").attr("unselectable", "on");
jQuery(".sp-preview-inner").attr("unselectable", "on");

这可以防止失去所选文本的焦点。根据我的测试，这不应影响其他浏览器的正常行为（在Firefox、Chrome和Opera上进行了测试）。 编辑：简单的颜色选择可以工作，但如果我想选择预定义的颜色或手动输入另一个值到显示的输入字段中，选择仍然会丢失。

-1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接