3

我正在实现一个具有两种状态的表单。只读模式,用户可以从标签中读取信息,包括姓名、年龄、地址等信息。除此之外,我想要一个用户可以编辑信息的编辑模式。

标准视图应该是只读模式,当用户单击编辑时,我希望标签更改为文本框并且可以编辑。

使用 html、css 和 jquery 实现这一点的最佳方法是什么?

4

1 回答 1

3

您正在寻找的内容称为“就地编辑”。不要浪费时间重新发明轮子。:)


但只是为了一个快速的想法,我会发布一个简短的片段让你开始 -

  1. 默认情况下始终以编辑模式渲染
  2. 如果需要,请设为只读 - 如下

 <form data-mode="read">
    <input value="Hello" />
 </form>

if($('form').data('mode') == 'read'){   //remove fields and add text
  $('form').find(':input').each(function(){
     $(this).replaceWith($('<span>' + $(this).val() + '</span>');
  });
 }

注意:您可以禁用它们,而不是使用标签替换.prop('disabled', true)

于 2012-09-03T18:33:33.883 回答