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

非同步傳輸技術 AJAX (Asynchronous JavaScript and XML) 可以讓網頁在不重新載入的情況下,網頁前端與後端 Web Server 伺服器溝通的技術與伺服器進行資料交換。這樣可以提高網頁的效能和使用者體驗。透過 AJAX 處理修改內容更新,就是指使用 AJAX 技術來傳送和接收修改後的資料,並在網頁上動態地顯示更新的內容。透過 AJAX 把修改的內容傳送給伺服器,可以節省時間和流量、增加網頁的互動性和可用性。

在網頁設計中 HTML 元素的全域屬性 contenteditable 將元素所指定的區塊,轉換成為「Editable Area 可編輯區域」以支援文字動態編輯作業。輸入編輯的文字內容即可介於程序處理修改的內容。同樣的元素 element 的全域屬性 contenteditable 亦可經過 truefalse 控制該元素是否可被編輯,主要是透過 AJAX 處理修改內容的更新。

<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;}