・意外と簡単に実装可能。
・考え方としては、以下の通り。これをjavascriptで実装する。
・①クリックした時にinput要素を作成する。
・②input要素からフォーカスが外れた時に表示用の要素を生成する。（元の要素に戻す）
使い方
$(".item").on("dblclick", function () {
exec_edit(this);
});
function exec_edit(ctrl) {
if (!$(ctrl).hasClass('on')) {
$(ctrl).addClass('on');
var txt = $(ctrl).text().trim();
$(ctrl).text('').append('<input type="text" value="' + txt + '" />');
$(ctrl).find('input').focus().blur(
function () {
var inputVal = $(this).val();
if (inputVal === '') {
inputVal = this.defaultValue;
};
$(this).parent().removeClass('on').text(inputVal);
}
);
};
}
参考
https://gihyo.jp/design/serial/01/jquery-site-production/0017