通过切换 contentEditable 使用 jQuery 更新一行 span 中的 span 内容答案

【问题标题】：Issue updating span content in a row of spans with jQuery by toggling contentEditable通过切换 contentEditable 使用 jQuery 更新一行 span 中的 span 内容
【发布时间】：2013-01-08 08:18:31
【问题描述】：

我有一个包含多个跨度的 div。当用户点击跨度时，它应该变成可编辑的。这部分工作正常，但是当有人试图编辑其中的内容时，问题就开始了。

第一个字符无法删除
不能多次按退格键，用户需要在按一次退格键后让光标回到范围内。
如果只剩下一个字符，可以将其删除，但跨度会消失。

这是 HTML

<div class="entries">
  <p class="entry">
    <span class="name">Taj</span>
    <span class="city">Havelock</span>
    <span class="price">10000.00</span>
    <span class="updaterow" style="visibility: hidden;"><a href="#">Save</a></span>
  </p>
</div>

和 JS

$('.entries').on('click','span', function() {
 $(this).attr('contentEditable', true);
 $(this).siblings('.updaterow').css('visibility','visible');
}).on('focusout','span',function() {
 $(this).attr('contentEditable', false);    
 $(this).siblings('.updaterow').css('visibility','hidden');
});

这里是 jsfiddle 上的相同内容，看看它是如何工作的 http://jsfiddle.net/VjUfZ/

【问题讨论】：

标签： jquery contenteditable

【解决方案1】：

使用 inline-block 代替 inline-table

span {
  width: 100px;
  display: inline-block;
}

演示：http://jsfiddle.net/VjUfZ/2/

【讨论】：

解决了这个问题。如果有人能解释为什么 inline-table 会导致这个问题，那就更棒了。同时，我也会自己去阅读有关 inline-table 的内容。