獲得 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>
- 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 不會受到冒泡事件影響,而 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;}