html5新特性contenteditable 屬性更容易實現動態表單

時間 2020-05-23

標籤 html5 html 特性 contenteditable 屬性容易實現動態表單欄目 HTML5 简体版

原文原文鏈接

介紹html5新特性的一個屬性：
contenteditable 做用域全局。全部的塊標籤均可以，例如：span、p、div、td等標籤。
可是，不能夠做用域<br/>類型的標籤。css

contenteditable屬性的做用是，容許標籤獲取焦點是能夠輸入內容。
html5以前：
若是咱們想建立一個表單，且表單的表格能夠輸入內容的狀況。會選擇一個js事件當點擊td標籤是動態生成一個input輸入框顯示在當前td標籤區域上方，輸入完成後將值賦給當前td中。而後input消失。
擁有html5以後，咱們只要在td標籤或全部區塊標籤加上contenteditable='true'的數據就能夠實現輸入操做了。是否是很方便。
一種場景：
咱們能夠利用html5的contenteditable屬性配合table區實現動態表單生成的操做。只要將須要輸入的td框賦值上contenteditable='true'，標題框賦值contenteditable='false'或者不寫就能夠了。
或者提供一個空白的table，列和行能夠自動添加的表單，這樣用戶想要什麼樣的表單，就本身去操做合適，咱們保存模板就能夠了。
可能遇到的問題：
後臺如何保存數據，前臺如何展現模板信息；用戶須要有限制性輸入內容如何處理，例如：性別內容只能夠選擇男和女或使用單選下拉框的狀況如何處理；若是用戶須要統計數據信息，如何處理數據庫中的信息。這個是實現一個實用性，易用性動態表單都須要考慮。但這些也是均可以解決的。若是有須要作動態表單的小夥伴，就好好思考這些問題吧。但願本文章能夠幫助到你。html

這裏只提供一個簡單實例
實例源碼：html5

<!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邊框重疊顯示變粗。

咱們看下效果：spa

原文出處：https://www.cnblogs.com/gynbk/p/10979818.htmlcode

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。