【问题标题】:Toggle / untoggle font size document.execCommand切换/取消切换字体大小 document.execCommand
【发布时间】:2015-10-20 03:44:03
【问题描述】:

我正在这里使用 contenteditable 编写一个小脚本。

它是切换/取消切换粗体、下划线、斜体,但我不能让它取消切换字体大小。它切换它,然后保持这种状态。

工作演示:https://jsfiddle.net/zesaj9ck/2/

<button id="toggle_bolt" onclick="document.execCommand('italic');">toggle italic</button>
<button id="toggle_bolt" onclick="document.execCommand('underline');">toggle underline</button>
<button id="toggle_bolt" onclick="document.execCommand('fontSize', false, 7);">toggle size</button>

<div id="wmd-input" contenteditable="true"></div>

【问题讨论】:

    标签: javascript toggle contenteditable


    【解决方案1】:

    在第一次点击后它根本没有“切换”或改变,因为每次点击只是将大小设置为 7。字体大小不仅有粗体、斜体和下划线两种状态。下面的工作示例改为从输入中获取指定的大小值。

    我还建议将您的点击处理程序移至函数,就像我对 changeSize 函数所做的那样。这样可以更清晰地分离关注点并提高可维护性。

    function changeSize(increase) {
      var value = parseInt(document.getElementById('size').value, 10) + (increase ? 1 : -1);
      
      document.execCommand('fontSize', false, value);
      document.getElementById('size').value = value;
    }
    #wmd-input {
      width : 500px;
      min-height : 100px;
      border : 2px solid;
    }
    <button id="toggle_bolt" onclick="document.execCommand('bold');">toggle bolt</button>
    <button id="toggle_bolt" onclick="document.execCommand('italic');">toggle italic</button>
    <button id="toggle_bolt" onclick="document.execCommand('underline');">toggle underline</button>
    <button id="toggle_bolt" onclick="changeSize(true)">Size +</button>
    <button id="toggle_bolt" onclick="changeSize(false)">Size -</button>
    <input id="size" value="4" readonly />
    <div id="wmd-input" contenteditable="true"></div>

    【讨论】:

    • 我明白了。以你的例子为例,我怎样才能完全消除 fontSize 的按钮,而只有一个下拉选项,我可以简单地选择字体大小?有可能吗?
    • @VitalSigns 当然,将change on input 事件附加到输入类型number,并在处理程序中运行execCommand。我会用一个例子来更新这个答案,但是如果你想在这个问题的原始范围之外继续提问,你真的应该提出新的问题。
    • 我意识到我的问题超出了我原来的问题,但与您的回答一样好,在网站上使用它是不切实际的。你会同意,对吧?我需要一个可供实际用户使用的解决方案。
    • @VitalSigns StackOverflow 并不是真正用于扩展讨论以输出可用于生产的代码。您的问题很好,因为它专门询问了使用execCommand 切换字体大小,这就是我的回答。此处的信息将带您进入下一步,此时您可以提出更多问题。话虽如此,我很高兴帮助您更接近您的目标,并且我用一个稍微不同的示例对其进行了更新。实际上使用 select 元素需要更多的努力,因为从中选择一个选项会从突出显示的文本中窃取焦点。
    猜你喜欢
    • 2020-07-19
    • 1970-01-01
    • 2015-03-05
    • 2013-02-01
    • 2012-09-12
    • 1970-01-01
    • 2016-03-05
    • 1970-01-01
    • 2021-10-18
    相关资源
    最近更新 更多