使用数字输入更改字体大小时如何保持选择文本

Question

我正在尝试通过在 Div 元素上使用 contenteditable 创建一个小型 Richtexteditor，但我遇到了一个问题：

我希望能够更改fontSize 当前选择，但是当我使用数字输入字段时，我会丢失当前选择，因此 document.execCommand('fontSize,false,myNumberValue) 不起作用。使用<button> 元素来执行命令确实有效，但我宁愿使用数字字段，我的选择是什么？

Answer 1

我也遇到过这个问题。这很痛苦，但除了像 Erik 提到的那样保存/恢复选择之外，我根本找不到解决它的方法。

解决此问题的一种可能方法是将输入放在模态框内，这样它会使 contenteditable 区域变灰，但即便如此，它仍然只是一种解决方法。只是帮助用户体验。

这是一个小sn-p，我用它来做一些非常相似的事情。

saveSelection : function(){
    var sel = window.getSelection(), ranges = [];
    if (sel.rangeCount) {
        for (var i = 0, len = sel.rangeCount; i < len; ++i) {
            ranges.push(sel.getRangeAt(i));
        }
    }
    return ranges;
},
restoreSelection : function(savedSel){
    var sel = window.getSelection();
    sel.removeAllRanges();
    for (var i = 0, len = savedSel.length; i < len; ++i) {
        sel.addRange(savedSel[i]);
    }
}

这似乎适用于我的大多数现代浏览器（Chrome、Safari、IE9+），但如果您需要它来支持旧版浏览器，您可能需要研究 Rangy - https://code.google.com/p/rangy/