在表单中实现读/编辑模式 [英] Implement read / edit mode in form

问题描述

我正在实现一个有两个状态的表单。只读模式，用户可以从名称，年龄，地址等信息中读取信息。除此之外，我想要一个编辑模式，用户可以编辑信息。

标准视图应该是只读模式，当用户点击编辑时，我想将标签更改为文本框并可编辑。

解决方案

您正在寻找的是什么？ href =http://www.appelsiini.net/projects/jeditable =nofollow>就地编辑。不要浪费时间重新创造轮子。 ：）

---

但是为了快速建议，我会发布一个简短的代码片段让你开始 -

默认情况下始终以编辑模式呈现

如果需要，请进行readonly，如下所示

< b

---

 < form data-mode =read> 
< input value =Hello/> 
< / form> 
 
 if（$（'form'）。data（'mode'）=='read'）{//删除字段并添加文本
 $ '：input'）。each（function（）{
 $（this）.replaceWith（$（'< span>'+ $（this）.val（）+'< / span>'） 
}）; 
} 
  

注意： 改为禁用使用 .prop（' disabled'，true）。

I am implementing a form that has two states. Read only mode where a user can read information from labels with information like name, age, address and so on.. In addition to this I want an edit mode where the user can edit the information.

Standard view should be read-only mode, and when the user clicks edit I want the labels to change to textboxes and be editable.

Whats the best way to implement this with the use of html, css and jquery?

解决方案

What you're looking for is called "in-place editing". Don't waste time re-inventing the wheel. :)

---

But just for a quick idea I'll post a short snippet to get you started -

1. Always render in edit mode by default
2. Make readonly if required - as follows

---

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

Note: Instead of replacing with labels you can disable them instead using .prop('disabled', true).

这篇关于在表单中实现读/编辑模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！