0

これは CRUD システムのような編集機能ですが、ユーザーがアイテムをシングルまたはダブルクリックすると、データを直接更新するためのフィールドに変換されるという単純化が目的です。

デモはこちら

問題は、フィールドに何も入力できないことです。なぜだろう...

HTML

<li style="list-style:none">click here to edit</li>

jquery

$(document).ready(function(){

$('li').click(function(){
   $(this).html("<input id='input' type='text'>");
});

$('#input').blur(function(){
  var newVal = ('#input').val();
      $('li').text('newVal');   
   });
});
4

3 に答える 3

2

これは、テキストフィールドのクリックが「li」のクリックでもあるためです。したがって、既存のテキストフィールドをクリックすると、新しいテキストフィールドが追加されます。

これが実際のフィドルです: http://jsfiddle.net/DNmNE/5/

そしてコード：

$(document).ready(function(){
    $('li').click(function(){
       input = $("<input id='input' type='text'>").blur(function(){
          $('.editable').removeClass('editable');
          var newVal = $(this).val();
          $('li').text(newVal);   
       });
       if (!$(this).hasClass('editable'))
           $(this).addClass('editable').html(input);
    });
    });

.editable クラスを使用して、テキストフィールドが既に開いているかどうかを検出しました。

于 2013-08-01T13:56:33.920 に答える
1

私の友人、あなたはクリックするたびに新しい入力を追加しているので、本当に速く入力する必要があります（冗談です）。しかし、それが問題です。リクリック機能を緩めます。

于 2013-08-01T13:55:59.190 に答える
0

ちょっと考えただけですが、HTML5 contenteditable機能の使用を検討したことはありますか?

http://html5demos.com/contenteditable

明らかに、時代遅れのブラウザーでは機能しませんが、それを気にしなければ、アプリケーションが大きくなるにつれて多くの作業を節約できます。

于 2013-08-01T13:57:13.487 に答える