contenteditableスパンのテキストを取得するには？

Question

私は、コンテンツ編集可能なスパンを含む私の小枝テンプレートにフォームを持っています。私は、新しいテキストを変更してスパンに追加するようにしたいので、フォームが提出されると新しいテキストが含まれます。ここで

は私のHTMLフォームです：

<form action="{{ path('change') }}" method="post"> 
    <span name="profil" class="profil" contenteditable="true">{{ prof.libel }}</span> 
    <button name="change" type="submit"> 
    </button> 
</form> 

これは私のjQueryのスクリプトです：

<script> 
    $(document).ready(function() { 
     $('span.profil').change(function() { 
      $text = $(this).text(); 
      $(this).append(document.createTextNode($text)); 
     }); 
    }); 
</script> 

Answer 1

SPAN要素は、そのようなchangeイベントがありません。 BUTTONのclickイベント、またはFORMのsubmitイベントでスパンのテキストをキャプチャする必要があります。

$('#theForm').on("submit", function() { 
    var text = $('span.profil').text(); 
    // or $('span.profil')[0].innerHTML; 
}); 

// or... 
$('#theButton').on("click", function() { 
    var text = $('span.profil').text(); 
}); 

参考：div、span、そして他の人がchangeイベントの相互作用を持っていないHTMLElementインタフェースを実装しています。 change eventの取り扱いをサポートする要素を確認してください。