元素的全域屬性 contenteditable 將 HTML 元素所指定的區塊,轉換成為可編輯區域以支援文字動態編輯作業。輸入編輯的文字內容即可介於程序處理修改的內容。同樣的元素 element 的全域屬性 contenteditable 亦可經過 true 或 false 控制該元素是否可被編輯。
<div class="editable"> <ul> <li data-index="1" contenteditable="true">H.264 Encoder Analytics</li> <li data-index="2" contenteditable="true">Streaming and Bitrate</li> <li data-index="3" contenteditable="true">Maximum Bitrate</li> <li data-index="4" contenteditable="true">Target Bitrate</li> <li data-index="5" contenteditable="true">Media Encoder</li> </ul> </div>
<!--[僅用來顯示當前獲得焦點狀態]--> <span class="status-event"></span> <span class="status-editor"></span>
使用 jQuery 觸動狀態及處理修改的內容
Bind an event handler to the "focusin focusout" JavaScript event.
$(function () { var sContent = ""; //暫存原本的內容 $("div.editable li").on("focusin focusout", function (event) { $("span.status-event").text(event.type); if (event.type == "focusin") { sContent = this.textContent; $("span.status-editor").text(""); } else if (event.type == "focusout") { /* 檢查是否修改 */ var Inspection = (sContent == this.textContent); if (!Inspection) { $("span.status-editor").text(this.getAttribute("data-index")); /* SQL Connection Execute 處理修改的內容 */ } else { $("span.status-editor").text(Inspection); } } }); });
.focus( handler ) //元素的獲得焦點的用法 .blur( handler ) //元素離開的失去焦點的用法
focusin, focusout 差異在於 focus, blur 不會受到冒泡事件影響,而 focusin 與 focusout 會受到 Event Bubbling 事件冒泡。通常支持事件冒泡的事件類型為 mouseover, mouseout 滑鼠事件和 click, keydown, keypress 鍵盤事件。接口事件 focus, blur, load, submit, change 一般不支持事件冒泡。冒泡事件影響(元素內再包含元素)一路從最底層往上冒泡,如經過的 element 時,發現 element 也有綁定事件就順便觸發。
:focus 準類別中的動態準類別,當元素被獲得焦點,會應用此設計的樣式。提示進入文字編輯作業。
div.editable ul li:focus{background-color:#ffffcc;}