獲得 contenteditable=true 焦點(動態編輯)

元素的全域屬性 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>

Event handler focus, blur, focusin, focusout

使用 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 也有綁定事件就順便觸發。

CSS

:focus 準類別中的動態準類別，當元素被獲得焦點，會應用此設計的樣式。提示進入文字編輯作業。

div.editable ul li:focus{background-color:#ffffcc;}