событие выделения и размытия в Firefox - PullRequest
Новая
       33

событие выделения и размытия в Firefox

0 голосов
/ 10 июня 2018

Я прошу прощения за мой плохой английский.Я сделал простой текстовый редактор wysiwyg и столкнулся с проблемой в браузере Firefox.Если фокус потерян из блока contenteditable, функция сохраняет выделение для последующего применения к нему действия через execCommand.В IE11, EDGE, Chrome все отлично, выделение сохраняется и вы можете восстановить его позже.В Firefox, если вы теряете фокус, нажимая на другой элемент, выбор этого элемента сохраняется, а не тот, с которым связано событие размытия.То есть событие запускается с опозданием и записывает в объект Selection ссылку на диапазон в элементе, по которому был выполнен щелчок.Такая ошибка возникает только тогда, когда фокус теряется из-за щелчка, при переключении на нажатие клавиши TAB все работает как надо.

Ниже приведен небольшой пример этой ошибки.Опять проблема возникает в Firefox. 

function sel() {
     var selection;
     if (document.getSelection !== undefined) {
         selection = document.getSelection();
         if (selection.getRangeAt && selection.rangeCount) {
             console.log(selection.getRangeAt(0));
          }
      } else if (document.selection && document.selection.createRange) {
          console.log(document.selection.createRange());
      }
    };

    document.getElementById("c").addEventListener("blur", sel, { capture: true });
<div id="c" contenteditable="true" style="width: 300px; height: 300px; border : 1px solid black;">ccccc</div>
<div id="b" style="width: 300px; height: 300px; background-color: green;">bbbbb</div>

Жду вашего совета, спасибо.

1 Ответ

0 голосов
/ 31 июля 2018

Firefox очень разочарован 

            function bindBeforeBlur(dom, callback){
                dom.addEventListener('focus', function(){
                    document.addEventListener('mousedown', callback, {
                        once: true
                    })
                })
                dom.addEventListener('mousedown', function(e){
                    e.stopPropagation();
                })
                dom.addEventListener('keydown', function(e){
                    if(e.key === 'Tab'){
                        e.preventDefault();
                    }
                })
            }

            var editable = document.getElementById('editable');
            
            var lastRange;
            bindBeforeBlur(editable, function(e){
                lastRange = window.getSelection().getRangeAt(0);
            })

            editable.focus();

            document.getElementById('insert')
            .addEventListener('click', function(){
                var sel = window.getSelection();
                sel.removeAllRanges();
                sel.addRange(lastRange);
                document.execCommand('insertHTML', false, Date.now() + ' ');
            })
        <button id="insert">insert</button>
        <div id="editable" contenteditable="true" 
        style="height: 400px;width: 400px;background: #eee"></div>
...