获得 contenteditable=true 焦点(动态编辑)

非同步传输技术 AJAX (Asynchronous JavaScript and XML) 可以让网页在不重新载入的情况下，网页前端与后端 Web Server 伺服器沟通的技术与伺服器进行资料交换。这样可以提高网页的效能和使用者体验。透过 AJAX 处理修改内容更新，就是指使用 AJAX 技术来传送和接收修改后的资料，并在网页上动态地显示更新的内容。透过 AJAX 把修改的内容传送给伺服器，可以节省时间和流量、增加网页的互动性和可用性。

在必威体育手机客户端中 HTML 元素的全域属性 contenteditable 将元素所指定的区块，转换成为「Editable Area 可编辑区域」以支援文字动态编辑作业。输入编辑的文字内容即可介于程序处理修改的内容。同样的元素 element 的全域属性 contenteditable 亦可经过 true 或 false 控制该元素是否可被编辑，主要是透过 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>

<!--[仅用来显示当前获得焦点状态]-->
<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 不会受到冒泡事件影响，而 focusin 与 focusout 会受到 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;}