Question

我正试图在Div元素上使用contenteditable来创建一个小型的richtexteditor，但我遇到了一个问题：

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

Answer 1

我也跑了（正在跑步）这个问题。这是一种痛苦，但除了像Erik提到的那样保存/恢复选择之外，我只是找不到它。

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

这是一个我用来做类似事情的小片段。

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/

如何在使用数字输入更改fontSize时保持选中文本

1 个答案: