w2ui 网格：无法在可编辑的 div 中获得焦点

Question

我希望能够展开一行并显示可编辑的 div 并能够对其进行编辑。然而，当我将我的文本光标放在可编辑的 div 中时，它几乎立即失去了焦点。
有什么方法可以阻止 div 失去焦点吗？

我做了一个jsFiddle来演示这个问题：http://jsfiddle.net/h2zoqm0n/1/

示例代码：

$(function () {
    $('#grid').w2grid({ 
        name: 'grid', 
        header: 'List of Names',
        records: [
        { "recid": 1, "fname": "John", "lname": "Doe", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
        { "recid": 2, "fname": "Stuart", "lname": "Motzart", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
        { "recid": 3, "fname": "Jin", "lname": "Franson", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
        { "recid": 4, "fname": "Susan", "lname": "Ottie", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
        { "recid": 5, "fname": "Kelly", "lname": "Silver", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
        { "recid": 6, "fname": "Francis", "lname": "Gatos", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
        { "recid": 7, "fname": "Mark", "lname": "Welldo", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
        { "recid": 8, "fname": "Thomas", "lname": "Bahh", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
        { "recid": 9, "fname": "Sergei", "lname": "Rachmaninov", "email": "jdoe@gmail.com", "sdate": "4/3/2012" }

        ],
        method: 'GET', // need this to avoid 412 error on Safari
        show: {
            header         : true,
            toolbar     : true,
            footer        : true,
            lineNumbers    : true,
            selectColumn: true,
            expandColumn: true
        },        
        columns: [                
            { field: 'fname', caption: 'First Name', size: '30%' },
            { field: 'lname', caption: 'Last Name', size: '30%' },
            { field: 'email', caption: 'Email', size: '40%' },
            { field: 'sdate', caption: 'Start Date', size: '120px' }
        ],
        searches: [
            { type: 'int',  field: 'recid', caption: 'ID' },
            { type: 'text', field: 'fname', caption: 'First Name' },
            { type: 'text', field: 'lname', caption: 'Last Name' },
            { type: 'date', field: 'sdate', caption: 'Start Date' }
        ],
        onExpand: function (event) {
            var data = w2ui.grid.get(event.recid);
            var cmp1 = data.fname;
            var cmp2 = data.lname;
            $('#' + event.box_id).html('<div style=""><table style="width: 100%;"><tr><td>' + cmp1 + '</td><td><div id="d" style="white-space: nowrap; border: 1px solid black;" contenteditable="true">' + cmp2 + '</div></td></tr></table ></div>');
        }
    });    
});

... 并且有一个 div 的 ID "grid":

<div id="grid" style="width: 100%; height: 400px; overflow: hidden;"></div>

Answer 1

使用 input 元素和 autofocus 属性 inside div 用于编辑 cmp2值

onExpand 函数的示例

onExpand: function (event) {
            var data = w2ui.grid.get(event.recid);
                    var cmp1 = data.fname;
                    var cmp2 = data.lname.replace("\n", "<br>");
                    $('#' + event.box_id).html('<div style=""><table style="width: 100%;"><tr><td>' + cmp1 + '</td><td><div id="DataInExcelEdit" style="white-space: nowrap; border: 1px solid black;" contenteditable="true"> <input style="width:100%" autofocus value=' + cmp2 + ' /></div></td></tr></table ></div>');
        }

以及更多 我认为你应该在单元格中编辑而不是在列展开时，这不是有效的方法 look at that

w2ui 网格：无法在可编辑的 div 中获得焦点

w2ui grid: Unable to get focus in editable divs

w2ui