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

Question

我有一个包含多个跨度的 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/

Answer 1

使用 inline-block 代替 inline-table

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

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