Javascript 在html文档中以粗体设置所选单词_Javascript

Javascript 在html文档中以粗体设置所选单词

javascript

Javascript 在html文档中以粗体设置所选单词,javascript,Javascript,我想要的是，用户可以在我的html文档中选择文本，如果尚未选择文本，则将其设置为粗体。如果它已经是粗体的，那么它将被设置回常规。我在这里找到了一个关于stackoverflow的示例，并想尝试一下这是我的测试代码： <html> <head> <title>Test</title> </head> <body> <script type="text/javascript" language="JavaScrip

我想要的是，用户可以在我的html文档中选择文本，如果尚未选择文本，则将其设置为粗体。如果它已经是粗体的，那么它将被设置回常规。我在这里找到了一个关于stackoverflow的示例，并想尝试一下

这是我的测试代码：

<html>
<head>
   <title>Test</title>
</head>
<body>
<script type="text/javascript" language="JavaScript">
   function toggleBold() {
    var range, sel;
    if (window.getSelection) {
        // Non-IE case
        sel = window.getSelection();
        if (sel.getRangeAt) {
            range = sel.getRangeAt(0);
        }
        document.designMode = "on";
        if (range) {
            sel.removeAllRanges();
            sel.addRange(range);
        }
        document.execCommand("bold", false, null);
        document.designMode = "off";
    } else if (document.selection && document.selection.createRange &&
            document.selection.type != "None") {
        // IE case
        range = document.selection.createRange();
        range.execCommand("bold", false, null);
    }
}
</script>

<div onselect="toggleBold()">This is a test.</div>

</body>
</html>

当我在chrome、safari或其他任何软件中测试时，什么都不会发生

我不是javascripter，所以我不知道如何调试它。

使用onMouseUp事件

<div onMouseUp="toggleBold()">This is a test.</div>

onSelect仅在输入和textarea对象上定义。试着用上它

<div onmouseup="toggleBold()">This is a test.</div>

示例：

避免使用内联JavaScript的替代答案。您的toggleBold函数确实可以工作，但它不会对任何事件执行操作，因为select event主要对从元素执行操作的元素执行操作

<span>Here is some text</span>

<script>
   /**
    *   Listen for any 'mouseup' event, which is actioned
    *   after the mouse click is released after a selection.
   **/
   window.addEventListener( 'mouseup', toggleBold, false );

   function toggleBold() {
      //Toggle's the text.
   }
</script>

演示小提琴：检查尝试onclick函数

<div onclick="toggleBold()">This is a test.</div>