如何创建内联可编辑字段。当我点击文本时，它会变成内联输入文本类型

Question

如何创建内联可编辑字段。当我点击文本时，它会变成内联输入文本类型。与转换为内联文本区域的段落相同的情况。 最重要的是，当我点击侧面或集中注意力时它应该保存状态但是在我按下保存按钮之前不提交数据。在最后它应该在ajax中发送数据。

 i am a one liner text 

 i am a paragraph 

Answer 1

我不会为你要求的内容编写完整的代码，但你的行动方针是：

1. 将click事件监听器添加到相关元素中，我的建议是为所有这些元素使用指定的类。

2. 在处理程序中，使用文本字段/ texteare替换sender元素的dom元素（您可以在此检查发送元素是SPAN还是P并相应地决定）并使用保存按钮。保存按钮应该“知道”它所涉及的输入字段（可以使用.data或只是假设它始终是按钮之前的元素来完成）

3. 向保存按钮添加单击事件处理程序，以便为您处理ajax保存。这个处理程序应该是一个通用的，它可以找到相关的字段并将其值提交给服务器端处理程序。

4. 保存成功后，从DOM中删除字段元素和按钮，并将其替换为带有更新文本的SPAN / P.

希望你找到自己的方式对你有意义。如果您需要特定步骤的帮助，可以为它打开一个新的问题并从此处链接到它。

Answer 2

我知道问题已经过时了，但我认为在这个网站上有一个很好的例子。 Facebook-Style Inline Profile Edit Fields with Ajax