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/

通过切换contentEditable，使用jQuery更新跨越一行跨度的内容

1 个答案: