html5新特性contenteditable 屬性更容易實現動態表單
阿新 • • 發佈：2019-06-05
介紹html5新特性的一個屬性：
contenteditable 作用域全域性。所有的塊標籤都可以，例如：span、p、div、td等標籤。
但是，不可以作用域<br/>型別的標籤。
contenteditable屬性的作用是，允許標籤獲取焦點是可以輸入內容。
html5之前：
如果我們想建立一個表單，且表單的表格可以輸入內容的情況。會選擇一個js事件當點選td標籤是動態生成一個input輸入框顯示在當前td標籤區域上方，輸入完成後將值賦給當前td中。然後input消失。
擁有html5之後，我們只要在td標籤或所有區塊標籤加上contenteditable='true'的資料就可以實現輸入操作了。是不是很方便。
我們可以利用html5的contenteditable屬性配合table區實現動態表單生成的操作。只要將需要輸入的td框賦值上contenteditable='true'，標題框賦值contenteditable='false'或者不寫就可以了。
或者提供一個空白的table，列和行可以自動新增的表單，這樣使用者想要什麼樣的表單，就自己去操作合適，我們儲存模板就可以了。
可能遇到的問題：
後臺如何儲存資料，前臺如何展示模板資訊；使用者需要有限制性輸入內容如何處理，例如：性別內容只可以選擇男和女或使用單選下拉框的情況如何處理；如果使用者需要統計資料資訊，如何處理資料庫中的資訊。這個是實現一個實用性，易用性動態表單都需要考慮。但這些也是都可以解決的。如果有需要做動態表單的小夥伴，就好好思考這些問題吧。希望本文章可以幫助到你。
這裡只提供一個簡單例項
例項原始碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
td{
line-height: 2em;
min-width: 200px;
border: 1px solid #d4d4d4;
padding: 5px;
padding-top: 7px;
padding-bottom: 7px;
vertical-align: top;
}
</style>
</head>
<body>
<table cellspacing="0" style="border-collapse: collapse;">
<thead>
<tr><th colspan="4">個人資訊</th></tr>
</thead>
<tbody><tr>
<td contenteditable="false" style="text-align: right;">姓名：</td><td contenteditable="true"></td>
<td contenteditable="false" style="text-align: right;">性別：</td><td contenteditable="true"></td></tr>
<tr>
<td contenteditable="false" style="text-align: right;">出生日期：</td><td contenteditable="true"></td>
<td contenteditable="false" style="text-align: right;">身份證號：</td><td contenteditable="true"></td></tr>
</tbody>
</table>
</body>
</html>注意：
cellspacing="0"處理td之間的空隙；
style="border-collapse: collapse;"處理td邊框重疊顯示變粗。
我們看下效果：