我正在实现一个具有两种状态的表单。只读模式,用户可以从带有姓名、年龄、地址等信息的标签中读取信息。除此之外,我还想要一个用户可以编辑信息的编辑模式。
标准视图应该是只读模式,当用户单击"编辑"时,我希望标签更改为文本框并可编辑。
使用html、css和jquery实现这一点的最佳方法是什么?
您想要的是所谓的"就地编辑"。不要浪费时间重新发明轮子。:)
但为了一个快速的想法,我会发布一个简短的片段,让你开始
- 默认情况下始终在编辑模式下渲染
- 如果需要,请只读-如下所示
<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)
禁用它们,而不是用标签替换。