使用css將頁面更改為編輯模式

Question

我不確定現在這幾天是否完全可以，但是我可以在點擊沒有javascript的按鈕並使用css后更改頁面視圖嗎？

我目前正在顯示一個包含信息的頁面，一旦用戶單擊編輯按鈕 - 用戶將能夠在同一視圖中進行更改，而不是轉到其他頁面。

這是頁面向用戶顯示的方式： 顯示的jsFiddle

<div>living the dream</div>
<hr/>
<div>
    <p>Lorem ipsum dolor sit amet...</p>
</div>

<div>Edit button</div>

這就是用戶點擊編輯按鈕后頁面的外觀： 編輯視圖的jsFiddle

<div class="page" contenteditable>living the dream</div>
<hr/>
<div class="content" contenteditable>
    <p>Lorem ipsum dolor sit amet...</p>
</div>

所以這些類將被隱藏，直到單擊編輯按鈕，然后它們將被添加到div

我可以用css完成這個，如果不是我的替代品而不是javascript？

Answer 1

你能做這樣的事嗎？ 使用復選框hack可以切換到contenteditable模式

Codepen http://codepen.io/noobskie/pen/gaXqgm?editors=110

事情是我不知道如何保存它，因為我從來沒有真正使用內容可編輯我不知道你是否可以動態選擇值

 input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } input[type=checkbox]:checked ~ div { display: inline; } .container { display: none; position: absolute; top: 9px; left: 8px; right: 8px; width: auto; } .page { -moz-appearance: textfield; -webkit-appearance: textfield; background-color: white; background-color: -moz-field; border: 1px solid darkgray; border-radius: 3px; box-shadow: 1px 1px 1px 0 lightgray inset; font: -moz-field; text-align: left; padding-top: 9px; padding-left: 10px; height: 25px; } .content { -moz-appearance: textfield-multiline; -webkit-appearance: textarea; background-color: white; border: 1px solid gray; border-radius: 5px; font: medium -moz-fixed; height: 128px; overflow: auto; padding: 2px; resize: both; position: relative; bottom: 12px; } 

 <div>living the dream</div> <hr/> <div> <p>Lorem ipsum dolor sit amet...</p> </div> <input type="checkbox" id="button" /> <label for="button" onclick>Edit Button</label> <div class="container"> <div class="page" contenteditable>living the dream</div> <hr/> <div class="content" contenteditable> <p>Lorem ipsum dolor sit amet...</p> </div> <input type="checkbox" id="button" /> <label for="button" onclick>Save Button</label> </div>