Question

有人可以推荐一个JavaScript库或示例代码，以便同时在线编辑多个字段吗？我正在寻找类似于Flickr的东西，当你点击一张照片的名称或描述时，他们都变成了texbox，当用户点击“保存”时他们俩都得救了。

我正在使用jQuery，所以jQuery插件会很好，但不是必需的。我已经查看了https://stackoverflow.com/questions/708801/whats-the-best-edit-in-place-plugin-for-jquery，但没有找到任何支持多个字段的内容。

Answer 1

您可以选择不使用插件。你可以有类似的东西： HTML：

<form>
  <table>
    <tr>
      <td>
        <span name="displayText">Text to edit1</span>
        <input type="text" name="editText" value="Text to edit1" style="display:none">
      </td>
    </tr>
    <tr>
      <td>
        <span name="displayText">Text to edit2</span>
        <input type="text" name="editText" value="Text to edit2" style="display:none">
      </td>
    </tr>
    <tr>
      <td>
        <input type="submit" name="save" value="Save">
      </td>
    </tr>
  </table>
</form>

然后你可以在$（document）.ready（）中编写类似的jQuery：

$('span[name=displayText]').click(function() {
  $(this).hide();
  $('input[name=editText]', $(this).closest('td')).show();
});

你当然可以随心所欲地设计它们。

（P.S.Code经过测试和工作！）

Answer 2

editor by Joseph Scott运作得相当好。由于所有内容都使用模板和CSS类完成，因此也可以进行相当自定义。请参阅demo here。（他确实在FLickr之后对此进行了模拟。）

Another In-Place Editor看起来也很有希望，虽然我自己没有尝试过。

用于一次编辑多个字段的就地编辑JavaScript

2 个答案: