在表单中实现读/编辑模式

时间:2012-09-03 18:30:29

标签: jquery html css

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

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

使用html,css和jquery实现这个的最好方法是什么?

1 个答案:

答案 0 :(得分:3)

您要找的是"in-place editing"。不要浪费时间重新发明轮子。 :)


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

  1. 默认情况下始终以编辑模式呈现
  2. 如果需要,只读 - 如下

  3.  <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>');
      });
     }
    

    注意:您可以disable them instead使用.prop('disabled', true)

    替换为标签