スパン要素を「編集可能」にする

Question

ダブルクリックすると編集可能になるspan要素があります。

エミュレートしたいエフェクトは、Google Chrome開発ツールのCSSプロパティをダブルクリックしたときと似ています。

Answer 1

今すぐテスト（画像を参照）、および作業を行います（少なくともFirefoxの8とUbuntu 11.04上のクロム14）：

$('span').bind('dblclick', 
    function(){ 
     $(this).attr('contentEditable',true); 
    }); 

JS Fiddle demo。 （下記）Randomblueさんのコメントに反応してを編集

---

：

...私はATTRを設定することができるように、私は、スパン外にするとき、ユーザーがクリックを検出しないか（ 'のcontentEditable'

$('span').bind('dblclick', function() { 
     $(this).attr('contentEditable', true); 
    }).blur(
     function() { 
      $(this).attr('contentEditable', false); 
     }); 

：

ちょうどblur()メソッドを追加）、偽

JS Fiddle demo。

Answer 2

上記作品：私はこのjsfiddleでそれをテストしてみた：http://jsfiddle.net/nXXkw/

また、ユーザーが要素のオフにクリックしたときに編集可能性を取り除くためには、次のとおりです。

$('span').bind('blur',function(){ 
    $(this).attr('contentEditable',false); 
}); 

Answer 3

をあなたが解決したい場合

は、単にあなたのCODE-ベースに、このブロックをドロップ：それはここで私はそれはあなたが説明した機能をエミュレート製の気の利いた小さなjQueryプラグインだ、ALL現代のブラウザで動作

//plugin to make any element text editable 
//http://stackoverflow.com/a/13866517/2343 
$.fn.extend({ 
    editable: function() { 
     var that = this, 
      $edittextbox = $('<input type="text"></input>').css('min-width', that.width()), 
      submitChanges = function() { 
       that.html($edittextbox.val()); 
       that.show(); 
       that.trigger('editsubmit', [that.html()]); 
       $(document).unbind('click', submitChanges); 
       $edittextbox.detach(); 
      }, 
      tempVal; 
     $edittextbox.click(function(event) { 
      event.stopPropagation(); 
     }); 

     that.dblclick(function(e) { 
      tempVal = that.html(); 
      $edittextbox.val(tempVal).insertBefore(that).bind('keypress', function(e) { 
       if ($(this).val() !== '') { 
        var code = (e.keyCode ? e.keyCode : e.which); 
        if (code == 13) { 
         submitChanges(); 
        } 
       } 
      }); 
      that.hide(); 
      $(document).click(submitChanges); 
     }); 
     return that; 
    } 
}); 

そうのような今、あなたは、jQueryのセレクタのオブジェクトに）単に（.editable呼び出すことにより、任意の要素を編集可能にすることができます。ユーザーがそれらを送信した後

$('#YOURELEMENT').editable(); 

変更を取得するにはに結合し、そのような "editsubmit" イベント、：

$('#YOURELEMENT').editable().bind('editsubmit', function(event, val) {})​; 
//The val param is the content that's being submitted. 

はここでフィドルのデモです：http://jsfiddle.net/adamb/Hbww2/

Answer 4

この素晴らしいjQueryプラグインが見つかりました：「Twitter Bootstrap、jQuery UIまたは純粋なjQueryを使ったX編集可能なインプレイス編集」http://vitalets.github.com/x-editable/

Answer 5

このトピックでは多くの回答が古くなっていますが、私のために、ありがとう。

しかし、彼の解決策は、要素とともにキー押しイベントを除去しないため、複数回発砲されました。

$.bind()の代わりに$.on()を使用して更新されたプラグインがあります。また、要素の再作成時にkeypressイベントハンドラが削除されています。

$.fn.extend({ 
    editable: function() { 
     var that = this, 
      $edittextbox = $('<input type="text"></input>').css('min-width', that.width()), 
      submitChanges = function() { 
       that.html($edittextbox.val()); 
       that.show(); 
       that.trigger('editsubmit', [that.html()]); 
       $(document).off('click', submitChanges); 
       $edittextbox.detach(); 
      }, 
      tempVal; 
     $edittextbox.click(function(event) { 
      event.stopPropagation(); 
     }); 

     that.dblclick(function(e) { 
      tempVal = that.html(); 
      $edittextbox.val(tempVal).insertBefore(that).off("keypress").on('keypress', function(e) { 
       if ($(this).val() !== '') { 
        var code = (e.keyCode ? e.keyCode : e.which); 
        if (code == 13) { 
         submitChanges(); 
        } 
       } 
      }); 
      that.hide(); 
      $(document).one("click", submitChanges); 
     }); 
     return that; 
    } 
}); 

http://jsfiddle.net/Hbww2/142/