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

元素的全域屬性 contenteditableHTML 元素所指定的區塊,轉換成為「可編輯區域」以支援文字動態編輯作業。輸入編輯的文字內容即可介於程序處理修改的內容。同樣的元素 element 的全域屬性 contenteditable 亦可經過 truefalse 控制該元素是否可被編輯。

<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>
  • H.264 Encoder Analytics
  • Streaming and Bitrate
  • Maximum Bitrate
  • Target Bitrate
  • Media Encoder
<!--[僅用來顯示當前獲得焦點狀態]-->
<span class="status-event"></span>
<span class="status-editor"></span>


Event handler focus, blur, focusin, focusout

使用 jQuery Event 觸動狀態及透過 AJAX 處理修改的內容,更直覺編輯多欄記錄。
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);
      }
    }
  });
});

事件冒泡 Event Bubbling

.focus( handler ) // 元素的獲得焦點的用法
.blur( handler ) // 元素離開的失去焦點的用法

focusin, focusout 差異在於 focus, blur 不會受到冒泡事件影響,而 focusinfocusout 會受到 Event Bubbling 事件冒泡。通常支持事件冒泡的事件類型為 mouseover, mouseout 滑鼠事件和 click, keydown, keypress 鍵盤事件。接口事件 focus, blur, load, submit, change 一般不支持事件冒泡。冒泡事件影響(元素內再包含元素)一路從最底層往上冒泡,如經過的 element 時,發現 element 也有綁定事件就順便觸發。


CSS focus 焦點

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

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