您可以执行以下操作：
有一个点击事件，并在运行中创建一个文本框，它将div中的文本作为一个值。
有一个模糊的甚至绑定到该文本框，并作出AJAX调用，并在其成功改变div文本
假设你的HTML是这样的：

<div id="fullname">Amazing Spider man</div>

字符串
你的JS代码应该是这样的：

$('#fullname').click(function(){
    var name = $(this).text();
    $(this).html('');
    $('<input></input>')
        .attr({
            'type': 'text',
            'name': 'fname',
            'id': 'txt_fullname',
            'size': '30',
            'value': name
        })
        .appendTo('#fullname');
    $('#txt_fullname').focus();
});

$(document).on('blur','#txt_fullname', function(){
    var name = $(this).val();
    $.ajax({
      type: 'post',
      url: 'change-name.xhr?name=' + name,
      success: function(){
        $('#fullname').text(name);
      }
    });
});

型
这在此jsfiddle中演示

使用HTML5的contentEditable

HTML5有一个原生的contentEditable属性，具有很好的浏览器支持，所以如果它符合您的情况，您可能想要探索这个属性。只需将contentEditable="true"放在div上即可使其可点击和可编辑。更多信息here和here。此外，here's a plugin进一步为contentEditable元素提供富文本，WYSIWYG工具和HTML支持。
要实际使用可编辑元素，您需要使用JS在输入发生时触发一个操作。对于原始帖子，他们会将输入内容传递给另一个函数，该函数将其发送到外部数据库。

示例代码，无插件，无jquery：

var myEditableElement = document.getElementById('myContent');
myEditableElement.addEventListener('input', function() {
    console.log('--- input detected ---');
    console.log(myEditableElement.innerHTML);
});

个字符

有jEditable：http://www.appelsiini.net/projects/jeditable
但是，X-editable看起来更好：http://vitalets.github.io/x-editable/
x1c 0d1x的数据

它被称为jQuery就地编辑。jQuery中有许多插件可以用于此。

为什么不只保留一个输入字段，并在blur上更改字段样式。您可以将所有内容都删除，这样看起来就不像输入，这样就不需要来回更改。

我知道这是一个旧的线程，但我建立了一个项目，正是这样做了一段时间前：https://github.com/JackChilds/Preview-In-Place。
然后，您可以像这样使用它：

// get element:
var el = document.querySelector('#idOfElement')
// function to process the user's data, e.g. you could convert markdown to HTML here:
function processData(data) {
  return data.toUpperCase() // do something with the data here
}
// initialise the class:
var example = new PreviewInPlace(el, {
  // options
  previewGenerator: processData // reference to the function that processes the data
})

个字符
当然，你可以添加一些CSS来使它看起来更整洁：

// get element:
var el = document.querySelector('#idOfElement')
// function to process the user's data, e.g. you could convert markdown to HTML here:
function processData(data) {
  return data.toUpperCase() // do something with the data here
}
// initialise the class:
var example = new PreviewInPlace(el, {
  // options
  previewGenerator: processData // reference to the function that processes the data
})

.block {
  width: 200px;
}
.block .edit {
  border: none;
  outline: none;
  border-radius: 0;
  resize: none;
}
.block .edit, .block .preview {
  padding: 8px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

/* Make the 'block' have a red background when in edit mode */
.block.state-edit .edit {
  background-color: rgba(131, 0, 0, 0.3);
}
/* Make the 'block' have a green background when in preview mode */
.block.state-preview .preview {
  background-color: rgba(9, 174, 0, 0.3);
}

<div id="idOfElement" class="block">
  <textarea class="edit" rows="1">Some Text Here</textarea>
  <div class="preview"></div>
</div>

<script src="https://cdn.jsdelivr.net/gh/JackChilds/Preview-In-Place@main/dist/previewinplace.min.js"></script>

你已经把整个过程命名了。
首先，将所有数字或字段分配给某个类。

<div class="editable">value</div>

字符串
然后，为该类分配一个单击事件。

$('.editable').click(function(){
 //replace element with input element containing the value
 //attach an onblur event to the new element
 $(newelement).blur(function(){
  //use $.ajax to send the element's value to your server
  //remove the input element and then replace the previous element with the new value
 });
});

型