单击时将div更改为表单

Question

我有一个带文字的div：

<div id="test">Some text here to edit</div>

当用户点击它时，需要更改为：

<form name="input" action="html_form_action.asp" method="get">
Edit: <input type="text" name="tex" value="Some text here to edit"/>
<input type="submit" value="Submit" />
</form> 

当用户点击div中的文本时，我怎样才能这样做，它会转换成上面的表格/输入框？

Answer 1

演示

使用HTML和jQuery（JavaScript框架）：http://jsfiddle.net/3qHst/1/。

其他信息

jQuery doc：.click()，.hide()和.show()。

代码

<强> html

<div id="test">Some text here to edit</div>

<form name="input" action="html_form_action.asp" method="get" style="display: none;">
    <label for="comment">Edit:</label>
    <input type="text" id="comment" value="Some text here to edit"/>
    <input type="submit" value="Submit" />
</form>

<强> jquery

$('#test').click(function(){
   $(this).hide();
   $('form').show();
});

Answer 2

嗯，你可能很幸运，因为有一个jquery插件可以做到这一点。实际上有一些，但我认为这是第一个。如果我没弄错的话，其他人就是这个项目的分叉。

http://www.appelsiini.net/projects/jeditable

手动执行您要求的操作会有点容易，但是可插入的插件实际上连接到将信息保存到数据库的Web服务，这可能是您正在寻找的，也可能不是。

让我来一个jsfiddle，看看我能做些什么。

编辑

我制作了这个jsfiddle - 它可以在我的本地机器上运行，但由于某些原因我无法在jsfiddle中使用它在我的浏览器上工作。但我最近遇到了jsfiddle的麻烦，我不明白为什么。

无论如何，这是链接。如果这不起作用，请告诉我。

http://jsfiddle.net/XXbgp/2/

Answer 3

HTML：

<form id='form' name="input" action="html_form_action.asp" method="get">
    <div id="test">Some text here to edit</div>
    <input type="text" name="tex" value="" class="hidden"/>
    <input type="submit" value="Submit" class="hidden" />
</form> 

使用Javascript：

$('#test').click(function() {
    $('#test').hide();
    $('#form').children('input').show();
    $('#form').children('input[name=tex]').val($('#test').html());
});

CSS：

.hidden { display: none; }
#test { cursor: pointer; }

尝试一下：http://jsfiddle.net/melachel/ymw4Z/

Answer 4

您还可以在div上使用html5 contentEditable属性，这样您就可以对div进行内联更改。

http://blog.whatwg.org/the-road-to-html-5-contenteditable