Fiddle Link

Question

我有一张桌子，我试图在用鼠标点击时将字段转换为可编辑的，但是，当焦点出来时，我希望该字段转换回自己的位置，这是没有contenteditable属性的正常td。

添加属性正常，但是它的focusout（）给出了问题，它不适用于某些表的列。

Fiddle Link

焦点输出只有在我回来并点击列和goback到其他td时才有效..我希望焦点在我移动到其他td后立即工作？

我错过了什么，或者我必须按照其他过程在我的桌子上按下它们时才有可编辑的列，并且当焦点时它们恢复正常。

Answer 1

关注焦点时，您需要将 contentEditable 属性设为 false ，同时删除 inputCopyCat 类。

$('tr.tableRow td.inner').on('click',function(e){
        e.preventDefault();
        e.stopImmediatePropagation();
        $(this).attr('contentEditable','true');
        $(this).addClass('inputCopyCat');
        $(this).focusout(function(e){
            // here's what you need to update in your code
            $(this).attr('contentEditable','false');
            $(this).removeClass('inputCopyCat');
        });
        console.log($(this));
    });
    $('tr.tableRow td.inner').focusout(function(e){
        e.stopPropagation();
        console.log('Hello');
    });

并且当您想要在移动到其他td后立即切换回默认视图，而不是使用focusout使用mouseleave。

$('tr.tableRow td.inner').on('click',function(e){
        e.preventDefault();
        e.stopImmediatePropagation();
        $(this).attr('contentEditable','true');
        $(this).addClass('inputCopyCat');
        // this mouseleave event will be fired when you leave the selected/focused td 
        $(this).mouseleave(function(e){
            $(this).attr('contentEditable','false');
            $(this).removeClass('inputCopyCat');
        });
        console.log($(this));
    });
    $('tr.tableRow td.inner').focusout(function(e){
        e.stopPropagation();
        console.log('Hello');
    });

jsFiddle

Answer 2

对于旧浏览器中的表，焦点将失败，而是从正文或单元格上的所有$单元格中删除属性和类，然后为活动单元格启用它。

        //Now Need to Get Available Months on Based of Year
    var $cell = $('tr.tableRow td.inner'),
        $body = $('body');
    $body.on('click',function(e){
        if($cell.children(e.target).length == 0 && $cell.index(e.target) == -1){
            $cell.attr('contentEditable','false')
                .removeClass('inputCopyCat');
        }
    });
    $cell.on('click',function(){
        $cell.attr('contentEditable','false')
             .removeClass('inputCopyCat');            
        $(this).attr('contentEditable','true');
        $(this).addClass('inputCopyCat');
    });

<强> http://jsfiddle.net/yhjw23of/

在表格td上使用`focusout`对`contenteditable =＆＃34; true＆＃34;`

Fiddle Link

2 个答案: