Выбрать все (ctrl + a) и проблема с document.execCommand в Firefox

У меня есть элемент ленты, текст которого можно редактировать. Он работает нормально, пока вы не нажмете ctrl + a или тройной щелчок внутри, чтобы выделить весь текст в Firefox. document.execCommand не будет работать в Firefox с ошибкой [Exception... "Failure" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: debugger eval code :: <TOP_LEVEL> :: line 1" data: no] в консоли.

Чтобы воспроизвести проблему, запустите приведенный ниже код, выделите весь текст внутри элемента (щелкнув текст и нажав ctrl + a) и в консоли браузера запустите document.execCommand('italic');.

        <div style="position: absolute; top: 89px; left: 41px; z-index: 6;">
          <font contenteditable="true" style="
              float: left;
              background: #a64ba5;
              vertical-align: top;
              color: #fff;
              font-weight: bold;
              font-size: 12px;
              padding-left:10px;
              padding-top:14px;
              padding-bottom:14px;
              ">Some text</font> 
          <span class="right" style="
              position: absolute;
              content: '';
              border: 20px solid #a64ba5;
              border-left-width: 10px;
              border-right-color: transparent;"></span>
        </div>

Есть ли у кого-нибудь идеи/решения этой проблемы?


person JohnyFree    schedule 18.10.2018    source источник


Ответы (1)


Я решил проблему, используя тег div вместо шрифта. Это устранило проблему в Firefox, похоже, это ошибка Firefox. Другим вариантом было бы поместить атрибут contenteditable в родительский элемент, но это сломает элемент, когда вы используете ctrl + a и backspace.

person JohnyFree    schedule 18.10.2018