Javascript 如果用户按enter键或在外部单击，则保留元素的新html值

我试图通过下面的代码片段找到一种方法，当用户从

中单击其他位置时，将

.text（newContent）

值放入编辑的单元格

目前，它只在用户按键盘上的Enter键时工作。我尝试将

e.type==“click”

或

e.which==1

添加到按键功能中，但它无法工作，因为它是

单元格上的事件

有没有办法删除

标记，并在用户在td之外单击时保留其值

$（函数（）{
$（“.td”）。单击（函数（）{
var content=$（this.text（）；
如果（$（this）.text（）=='…'））{
$（this.html（“”）；
}否则{
$（this.html（“”）；
}
$（this.children（）.first（）.focus（）；
$（this）.children（）.first（）.keypress（函数（e）{
如果（e.which==13）{
if（$（this.val（）=''）{
var newContent='…'
$（this）.parent（）.text（newContent）；
}否则{
var newContent=$（this.val（）；
$（this）.parent（）.text（newContent）；
}
}
});
});
});
#表td{
宽度：50px；
边框：1px实心#C0C0；
}

...
...
...
...
...
...
...
原始版本有一些问题（嵌套处理程序从来都不是一个好主意，因为会发生多个事件）。我在下面使用委托处理程序为您进行了完整的重写

JSFiddle：

这使用委托事件处理程序来允许动态创建控件。它还针对
focusout
事件，这是您离开输入时得到的结果

$(function () {
    // Use a delegated event handler as the inputs are dynamic
    $('#table').on('focusout', 'td input', function () {
        var $input = $(this);
        var $td = $input.closest('td');
        var content = $input.val();
        $td.html(content == "" ? "..." : content);
    }).on('click', 'td', function () {
        var $td = $(this)
        var content = $td.text();
        if (content == '...') {
            content = "";
        }
        $td.html('<input type="text" value="' + content + '" size="8" />');
        // Focus on the new input
        $('input:first', $td).focus();
    });
});

$（函数（）{
//使用委托事件处理程序，因为输入是动态的
$（'#table'）。关于（'focusout'，'td input'，函数（）{
var$input=$（此）；
var$td=$input.closest（'td'）；
var content=$input.val（）；
$td.html（内容=“”？“…”：内容）；
}).on（'click'，'td'，函数（）{
var$td=$（此）
var content=$td.text（）；
如果（内容=“…”）{
content=“”；
}
$td.html（“”）；
//关注新的输入
$（'input:first'，$td.focus（）；
});
});
对于初学者，您将关键事件处理程序附加到单击事件处理程序中，并且从不分离它们。这意味着他们将开始多次开火。