0

複数のスパンを含むdivがあります。ユーザーがスパンをクリックすると、編集可能になります。この部分は正常に機能していますが、誰かがその中のコンテンツを編集しようとすると、問題が始まります。

  • 最初の文字は削除できません
  • バックスペースを2回以上押すことはできません。ユーザーは、バックスペースを1回押した後、カーソルをスパンに戻す必要があります。
  • 残りの文字が1つしかない場合は削除できますが、スパンは消えます。

これが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/

4

1 に答える 1

1

inline-tableの代わりにinline-blockを使用する

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

デモ： http： //jsfiddle.net/VjUfZ/2/

于 2013-01-08T08:24:17.580 に答える