Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.04.2012, 16:27
Профессор
Посмотреть профиль Найти все сообщения от Антон Крамолов
 
Регистрация: 11.04.2012
Сообщений: 255

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 ничего не выделяется вообще. Как сделать чтобы работало в этих трёх браузерах?

Живой пример
Ответить с цитированием
  #2 (permalink)  
Старый 11.04.2012, 17:15
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,873

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

habrahabr.ru/post/55922/
Ответить с цитированием
  #3 (permalink)  
Старый 11.04.2012, 17:33
Профессор
Посмотреть профиль Найти все сообщения от Антон Крамолов
 
Регистрация: 11.04.2012
Сообщений: 255

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 не работает в опере и безногом. в фуфлофоксе все ок, как и раньше. что не так?

Последний раз редактировалось Антон Крамолов, 11.04.2012 в 17:37.
Ответить с цитированием
  #4 (permalink)  
Старый 11.04.2012, 17:42
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,873

Не могу сейчас сам попробовать. Может быть зря removeAllRanges убрали или попробуйте отдельно установить начало и конец range-объекта. Или, наверное, выделение сбрасывается, потому что за mouseup следует click.
Ответить с цитированием
  #5 (permalink)  
Старый 11.04.2012, 17:43
Профессор
Посмотреть профиль Найти все сообщения от Антон Крамолов
 
Регистрация: 11.04.2012
Сообщений: 255

Кстати гавнохром вообще не запоминает выделения
Ответить с цитированием
  #6 (permalink)  
Старый 11.04.2012, 17:45
Профессор
Посмотреть профиль Найти все сообщения от Антон Крамолов
 
Регистрация: 11.04.2012
Сообщений: 255

Они сбрасываются только в хроме, в опере выделяет неправельно, в лисе работает
Ответить с цитированием
  #7 (permalink)  
Старый 11.04.2012, 17:55
Профессор
Посмотреть профиль Найти все сообщения от Антон Крамолов
 
Регистрация: 11.04.2012
Сообщений: 255

// так убирает выделение в 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();
                }
            }

Последний раз редактировалось Антон Крамолов, 11.04.2012 в 17:58.
Ответить с цитированием
  #8 (permalink)  
Старый 11.04.2012, 18:02
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,873

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

Последний раз редактировалось Octane, 11.04.2012 в 18:06.
Ответить с цитированием
  #9 (permalink)  
Старый 11.04.2012, 18:55
Профессор
Посмотреть профиль Найти все сообщения от Антон Крамолов
 
Регистрация: 11.04.2012
Сообщений: 255

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();
    }
}
Ответить с цитированием
  #10 (permalink)  
Старый 11.04.2012, 19:11
Профессор
Посмотреть профиль Найти все сообщения от Антон Крамолов
 
Регистрация: 11.04.2012
Сообщений: 255

<!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'е выделяет неправильно.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
не работает range в ie like2dev Общие вопросы Javascript 2 21.09.2011 18:41
Передача данных в Multiple Selection trans ExtJS 2 13.07.2011 08:45
jQuery range slider Turner jQuery 0 15.03.2011 10:51
Теряется selection при потере фокуса danik.js Internet Explorer 1 15.10.2010 07:33
Метод pasteHTML объекта Range вырезает комментарии в IE orange Internet Explorer 6 28.12.2009 18:44