更改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的文檔：.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

這將在一定程度上容易做你手動問什麼，但jeditable插件實際上是連接到保存信息的數據庫，這可能是也可能不是你」的網絡服務重新尋找。

讓我在jsfiddle上工作，看看我能做些什麼。

編輯

我做這個的jsfiddle - 它的作品我的本地機器上，但我不能讓它在的jsfiddle在我的瀏覽器中運行的某些原因。但最近我一直在jsfiddle遇到麻煩，我不知道爲什麼。

無論如何，這裏的鏈接。讓我知道如果這不起作用。

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

Answer 3

你也可以使用在DIV上，這將允許您更改到div內聯HTML5 CONTENTEDITABLE屬性。

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

Answer 4

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/