Selection / Range

[Антон Крамолов]

function extend(obj, hash) {      
                for (var k in hash) {
                    if (hash.hasOwnProperty(k)) {
                        obj[k] = hash[k];
                    }
                }
            }
    
            function clone(obj) {
                return extend({}, obj);
            }
            
            function create(tag, props) {
                var el = document.createElement(tag);
                extend(el, props);
                return el;
            }
            
            document.onmouseup = function() {              
                var sel = window.getSelection();
                var txt = sel.toString();
                if (txt.trim()) {
                    var rng = sel.getRangeAt(0);                 
                    var el = create('strong', {innerHTML: txt});
                    rng.deleteContents();
                    rng.insertNode(el);                  
                    rng.selectNode(el);
                }
            }

Выделяешь текст, отпускаешь ЛКМ, текст становится жирным. Но! В браузере Opera выделяется не тот текст, в FF работает всё как надо, в Chrome ничего не выделяется вообще. Как сделать чтобы работало в этих трёх браузерах?

Живой пример

[Octane]

selectNode не должен никак влиять на визуальное выделение, он устанавливает границы для конкретного range-объекта, для установки выделения в тесте используйте метод addRange объекта, который возвращает getSelection.

habrahabr.ru/post/55922/

[Антон Крамолов]

function extend(obj, hash) {      
                for (var key in hash) {
                    if (hash.hasOwnProperty(key)) {
                        obj[key] = hash[key];
                    }
                }
            }
            
            function create(tag, props) {
                var el = document.createElement(tag);
                extend(el, props);
                return el;
            }
            
            function select(node) {
                var rng = document.createRange();
                rng.selectNode(node);
                var sel = window.getSelection();
                sel.addRange(rng);
            }
            
            document.onmouseup = function() {              
                var sel = window.getSelection();
                var txt = sel.toString();
                if (txt.trim()) {
                    var rng = sel.getRangeAt(0);                 
                    var el = create('strong', {innerHTML: txt});
                    rng.deleteContents();
                    rng.insertNode(el); // добавил ноду
                    sel.removeRange(rng); // удалил range
                    select(el); // выбрал ноду
                }
            }

http://pastehtml.com/view/buev3zsg0.html не работает в опере и безногом. в фуфлофоксе все ок, как и раньше. что не так?

[Octane]

Не могу сейчас сам попробовать. Может быть зря removeAllRanges убрали или попробуйте отдельно установить начало и конец range-объекта. Или, наверное, выделение сбрасывается, потому что за mouseup следует click.

[Антон Крамолов]

Кстати гавнохром вообще не запоминает выделения

[Антон Крамолов]

Они сбрасываются только в хроме, в опере выделяет неправельно, в лисе работает

[Антон Крамолов]

// так убирает выделение в Opere, в безногом ублюдке вообще выделение всегда пропадает
          document.onmouseup = function() {              
                var sel = window.getSelection();
                var txt = sel.toString();
                if (txt.trim()) {
                    var rng = sel.getRangeAt(0);
                    sel.removeAllRanges();
                }
            }

            // а так нет(Опера)
            document.onmouseup = function() {              
                var sel = window.getSelection();
                var txt = sel.toString();
                if (txt.trim()) {
                    var rng = sel.getRangeAt(0);
                    var el = create('strong', {innerHTML: txt});
                    rng.deleteContents();
                    rng.insertNode(el);
                    sel.removeAllRanges();
                }
            }

[Octane]

Попробуйте получать selection по mouseup и выделять range по onclick.

[Антон Крамолов]

document.onmouseup = function() {              
    var sel = window.getSelection();
    var txt = sel + '';
    if (txt.trim()) {
        var rng = sel.getRangeAt(0);
        var el = create('strong');
        sel.removeAllRanges(); // Так убирает выделенное, но где логика?
        el.appendChild(rng.extractContents());
        rng.insertNode(el);
        // А после - нет.
        // sel.removeAllRanges();
    }
}

[Антон Крамолов]

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript">
            
            function extend(obj, hash) {      
                for (var key in hash) {
                    if (hash.hasOwnProperty(key)) {
                        obj[key] = hash[key];
                    }
                }
            }
            
            function create(tag, props) {
                var el = document.createElement(tag);
                extend(el, props);
                return el;
            }
                      
            document.onmouseup = function() {              
                var sel = window.getSelection();
                var txt = sel + '';
                if (txt.trim()) {
                    var rng = sel.getRangeAt(0);
                    var node = create('span');
                    node.style.cssText = 'font-weight: bold';
                    sel.removeAllRanges();
                    node.appendChild(rng.extractContents());
                    rng.insertNode(node);
                    rng.selectNode(node);
                    sel.addRange(rng);
                }
            }
            
        </script>
    </head>
    <body>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <em>tempor</em> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </body>
</html>

Вот так работает в FF, Chrom'е. В Oper'е выделяет неправильно.