Есть div, у него стоит contenteditable="true", ondblclick стоит div.focus(), начинаю сразу вводить текст - пропадает содержимое, нажму третий раз - все нормально... Что делать?

А зачем Вам div.focus()?
Элементы с contenteditable="true" и без этого нормально выделяются и редактируются. При наведении мыши у них псевдокласс :hover, при вводе теста - : focus

http://jsfiddle.net/qnXnb/

Это сообщение отредактировал(а) Arantir - 19.6.2013, 23:11

проблема в том, что, изначально блок стотит с contenteditable=false, а точнее без него, он получает true при дабл клике но, если ему не передать фокус, то придется сделать еще один клик, 3ий клик фигня, поэтому я передаю ему фокус и можно сразу вводить текст, но если сразу, после получения фокуса начать вводить текст, то он удалит содержимое, поэтому все равно требуется 3ий клик, что меня не устаивает, яподозреваю, что мне нужно поместить указатель на тексте после фокуса, в конце напимер и тогда, по идеи, все будет ок

Вы хотите, чтобы редактирование активировалось только при даблклике?
Можно оставить contenteditable=true и просто отменять фокус по одному клику и, как Вы сделали, повесить на двойной.

Вроде бы работает без глюков: http://jsfiddle.net/qnXnb/2/

Добавлено @ 23:30
P.S.: Если у Вас иногда не получается с onclick отменять стандартные действия (preventDefault), то пробуйте с onmousedown.  Просто браузер некоторые действия именно на нем делает, а не на клике.

Это сообщение отредактировал(а) Arantir - 19.6.2013, 23:31

Объект вляется передвигаемым, поэтому прои одном клике он выделяется и ему можно изменять размер, и двигать, в при двойном он должен стать изменяемым.

Можете привести свой код? Можно только тот, который связан с этим передвигаем изменяемым элементом.
Быстрее будет, если сразу в нем разбираться. А то еще какие подробности всплывут, вроде drag-n-drop, так никогда тема не кончится =)

Добавлено через 11 минут и 56 секунд
Если пользуетесь jQuery, то там для draggable есть параметр cancel, в котором можно указать селектор фокуса. Тогда в фокусе элемент не перетаскивается. При этом нет проблем с "третьим кликом".
http://jsfiddle.net/qnXnb/3/

Это сообщение отредактировал(а) Arantir - 19.6.2013, 23:42

<style>
    /*Квадраты изменени размера*/
    .l_r_rsz,.t_b_rsz,.r_b_rsz{width:10px;height:10px;background:#fff;position:absolute;display:none;border:1px solid #bbb;}
    .l_r_rsz{left:100%;margin-left:-6px;top:50%;margin-top:-6px;cursor :e-resize;}
    .t_b_rsz{top:100%;margin-top:-6px;left:50%;margin-left:-6px;cursor: s-resize;}
    .r_b_rsz{top:100%;left:100%;margin-top:-6px;margin-left:-6px;cursor: se-resize;}
</style>
<script>
    var drag = new Object();
    drag.selected = false;
    drag.editing = false;
    drag.obj = new Object();
    drag.startX = 0;
    drag.startY = 0;
    drag.curX = 0;
    drag.curY = 0;
    drag.top = 0;
    drag.left = 0;
    
    window.onload = function()
    {
        var block = document.createElement('div');
        block.className = 'block e1';
        block.style.position = 'absolute';
        block.style.top = '0px';
        block.style.left = '0px';
        block.style.width = '200px';
        block.style.height = '200px';
        block.style.cursor = 'pointer';
        block.style.background = '#000';
        document.body.appendChild(block);
        var t = document.createElement('div');
        t.className = 'l_r_rsz';
        block.appendChild(t);
        var t = document.createElement('div');
        t.className = 't_b_rsz';
        block.appendChild(t);
        var t = document.createElement('div');
        t.className = 'r_b_rsz';
        block.appendChild(t);
        
        document.onmousedown = select;
        document.onmouseup = up;
    }
    
    function select(event)//кликаем по чему-либо
    {
    
        //event.which - какая кнопка нажата, средняя, правая или левая
        
        var target = event.target;
        var clas = target.getAttribute('class');
        if(clas == 'l_r_rsz')
        {
            // <- -> иизменение размеров
            document.onmousemove = l_r_r;
        }else if(clas == 't_b_rsz')
        {
            // \/ /\ размеров
            document.onmousemove = t_b_r;
        }else if(clas == 'r_b_rsz')
        {
            // диагональное изменение
            document.onmousemove = b_r_r;
        }
        else
        {
            var is_clas = false;//переменная, которая говорит о наличии выделенного элемента с классом блок
            if(drag.editing == false)
            {
                if(clas!=null)
                    var clas = clas.split(" ");
                for(var a in clas)
                    if(clas[a] == 'block')
                    {
                        if(event.which == 1)
                        {
                        if(drag.selected == true && target !== drag.obj)//убираем селекторы т.к. нажат другой блок
                        {
                            clear_ob()
                        }
                            drag.selected = true;
                            drag.obj = target;
                            drag.startX = event.pageX;
                            drag.startY = event.pageY;
                            drag.top = target.offsetTop;
                            drag.left = target.offsetLeft;
                            drag.s_w = target.offsetWidth;
                            drag.s_h = target.offsetHeight;
                            target.getElementsByClassName('l_r_rsz')[0].style.display = 'block';
                            target.getElementsByClassName('t_b_rsz')[0].style.display = 'block';
                            target.getElementsByClassName('r_b_rsz')[0].style.display = 'block';
                            
                            document.ondragstart = function() { return false }
                            document.body.onselectstart = function() { return false }
                            
                            target.style.background = '#0f0';
                            document.onmousemove = move_obj;
                            target.ondblclick = makeEdit;
                            
                            // 1)добавить выделение
                            // 2) сделать передвижение
                        }
                        is_clas = true;
                        break;
                    }
            }
            else
            {
                if(target === drag.obj)
                    return;
                else//снимаем выделение т.к. во время редактирования блока был нажат не блочный элемент
                {
                    clear_ob();
                }
            }
            
            if(is_clas == false&&drag.selected ==true)//убираем селекторы т.к. нажат другой элемент, не блок
            {
                clear_ob();
            }
        }
    }
    
    function move_obj(event)//двигаем блок
    {
        drag.obj.style.top = drag.top - drag.startY + event.pageY +'px';
        drag.obj.style.left = drag.left - drag.startX + event.pageX +'px';
    }
    
    function up(event) //отпускаем мышку
    {
        document.onmousemove = function(){return false;};
        if(event.which == 1)
        {
            var target = event.target;
            if(target === drag.obj)
            {
                ;
            }
        }
    }
    
    function l_r_r(event)//горизонталное изменение
    {
        drag.obj.style.width = event.pageX  - drag.obj.offsetLeft +'px';
    }
    
    function t_b_r(event)//вертикальное изменение
    {
        drag.obj.style.height = event.pageY  - drag.obj.offsetTop +'px';
    }
    
    function b_r_r(event)//диагональное изменение
    {
        drag.obj.style.width = event.pageX  - drag.obj.offsetLeft +'px';
        drag.obj.style.height = event.pageY  - drag.obj.offsetTop +'px';
    }
    
    function clear_ob()//снимаем выделение
    {
        drag.editing = false;
        drag.obj.style.cursor = 'pointer';
        drag.obj.contentEditable =false;
        drag.obj.ondblclick = function(){};
        drag.obj.style.background = '#000';
        drag.obj.getElementsByClassName('l_r_rsz')[0].style.display = 'none';
        drag.obj.getElementsByClassName('t_b_rsz')[0].style.display = 'none';
        drag.obj.getElementsByClassName('r_b_rsz')[0].style.display = 'none';
        
        drag.selected = false;
        drag.obj = new Object();
        drag.startX = 0;
        drag.startY = 0;
        drag.curX = 0;
        drag.curY = 0;
        drag.top = 0;
        drag.left = 0;
        
        document.ondragstart = function() {}
        document.body.onselectstart = function() {}
    }
    
    function makeEdit()//делаем блок ищменяемым
    {
        drag.editing = true;
        drag.obj.contentEditable =true;
        drag.obj.style.cursor = 'text';
        drag.obj.style.background = '#d0d0d0';
        drag.obj.getElementsByClassName('l_r_rsz')[0].style.display = 'none';
        drag.obj.getElementsByClassName('t_b_rsz')[0].style.display = 'none';
        drag.obj.getElementsByClassName('r_b_rsz')[0].style.display = 'none';
        drag.obj.focus();
        document.onmousemove = function(){};
    }
</script>

Кстати говоря, если вообще убрать фокус, то все будет ок, но только на 3ий клик...

Ну а если при двойном клике сделать contenteditable=true следом клик программный клик заместо фокуса. drag.obj.click();

Не сработало

Забавно, что в Chrome работает слово в слово так, как Вы описывали желаемый результат.
Проблема есть в Firefox (может где-то еще, но не проверял).

По-видимому, Chrome считает только двойной клик, а Firefox берет в расчет еще и самый первый. А тройной клик — это выделение всей строки.
Надо где-то сунуть preventDefault, но чтобы не поломать то, что есть. Поэксперементирую, когда посвободней буду.