document.execCommand не удерживает событие щелчка

#jquery

#jquery

Вопрос:

Я пытаюсь выделить текст жирным шрифтом нажатием на кнопку. Я создал его в JS Fiddle, и он отлично работает. Однако проблема заключается в том, что я помещаю скрипт на веб-страницу. Он выполняет действие, но не удерживает событие щелчка

https://jsfiddle.net/lvwiseguy/v7jm03zu/7/

 <head runat="server">
    <title></title>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function() {
            $('#BoldText').click(function () {
                document.execCommand('bold');
            });
        });
    </script>
    <style>
        #editable_textarea {
          width: 100%;
          height: 150px;
          border: 1px solid blue;
        }

        button {
          font-weight: bold;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <button id="BoldText">B</button>
        <div id='editable_textarea' contenteditable="true">
          Select text and click the button to make it bold...
        </div>
    </form>
</body>
  

Комментарии:

1. У вас есть id="form1" там, означает ли это, что у вас также есть id="form2" с точно ТАКИМИ же дочерними элементами внутри?

2. @AlonEitan никакая форма 1 не является идентификатором по умолчанию при создании страницы aspx.