我正在实施一个有两种状态的表单。只读模式,用户可以使用姓名,年龄,地址等信息从标签中读取信息。除此之外,我还想要一个用户可以编辑信息的编辑模式。
标准视图应该是只读模式,当用户点击编辑时,我希望标签更改为文本框并且可以编辑。
使用html,css和jquery实现这个的最好方法是什么?
答案 0 :(得分:3)
您要找的是"in-place editing"。不要浪费时间重新发明轮子。 :)
但只是为了一个简单的想法,我会发布一个简短的片段,让你开始 -
<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)
。