如果我可以建議使用HTML元素可編輯API的替代方案。
$("[data-cid]").prop({tabindex: 1, contenteditable: true}).on({
focusin() {
this.__html = $(this).html(); // Store current HTML content
},
focusout() {
const data = {
cid: this.dataset.cid,
html: this.innerHTML,
};
if (this.__html === data.html) return; // Nothing has changed.
console.log(data); // Something changed, send data to server.
}
})
<div data-cid="4">Test #4</div>
<div data-cid="5">Test #5</div>
<div data-cid="6">Test #6</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
創(chuàng)建自己的庫
下面是一個示例，說明如何簡單地創(chuàng)建自己的可重用函數(shù)：
// Editable
function Editable(sel, options) {
if (!(this instanceof Editable)) return new Editable(...arguments);
const attr = (EL, obj) => Object.entries(obj).forEach(([prop, val]) => EL.setAttribute(prop, val));
Object.assign(this, {
onStart() {},
onInput() {},
onEnd() {},
classEditing: "is-editing", // added onStart
classModified: "is-modified", // added onEnd if content changed
}, options || {}, {
elements: document.querySelectorAll(sel),
element: null, // the latest edited Element
isModified: false, // true if onEnd the HTML content has changed
});
const start = (ev) => {
this.isModified = false;
this.element = ev.currentTarget;
this.element.classList.add(this.classEditing);
this.text_before = ev.currentTarget.textContent;
this.html_before = ev.currentTarget.innerHTML;
this.onStart.call(this.element, ev, this);
};
const input = (ev) => {
this.text = this.element.textContent;
this.html = this.element.innerHTML;
this.isModified = this.html !== this.html_before;
this.element.classList.toggle(this.classModified, this.isModified);
this.onInput.call(this.element, ev, this);
}
const end = (ev) => {
this.element.classList.remove(this.classEditing);
this.onEnd.call(this.element, ev, this);
}
this.elements.forEach(el => {
attr(el, {tabindex: 1, contenteditable: true});
el.addEventListener("focusin", start);
el.addEventListener("input", input);
el.addEventListener("focusout", end);
});
return this;
}
// Use like:
Editable(".editable", {
onEnd(ev, UI) { // ev=Event UI=Editable this=HTMLElement
if (!UI.isModified) return; // No change in content. Abort here.
const data = {
cid: this.dataset.cid,
text: this.textContent, // or you can also use UI.text
}
console.log(data); // Submit your data to server
}
});
/* Your styles */
.editable {
padding: 10px;
background: #eee;
display: inline-block;
}
/* this class is handled by Editable */
.is-modified {
background: #bff;
}
/* this class is handled by Editable */
.is-editing {
background: #bfb;
outline: none;
}
<div class="editable" data-cid="4">Test #4</div>
<div class="editable" data-cid="5">Test #5</div>
<div class="editable" data-cid="6">Test #6</div>
<div class="editable" data-cid="7">Test #7</div>
可編輯功能：
Editable("selector", options);
返回：可編輯實例
選項對象：
性能：
classEditing:
字符串 - 要在焦點上添加的類（默認(rèn)值："is-editing")
classModified:
字符串 - 如果內(nèi)容已更改，則要在焦點上添加的類（默認(rèn)值："is-modified")
方法：
onStart(event, UI)
函數(shù) - 事件
參數(shù)上的觸發(fā)器：觸發(fā)回
調(diào)參數(shù)的事件：可編輯實例對象
綁定：綁定到關(guān)聯(lián)的 HTML 元素"focusin"eventUIthis
onInput(event, UI)
函數(shù) - 事件
參數(shù)上的觸發(fā)器：觸發(fā)回
調(diào)參數(shù)的事件：可編輯實例對象
綁定：綁定到關(guān)聯(lián)的 HTML 元素"input"eventUIthis
onEnd(event, UI)
函數(shù) - 事件
參數(shù)上的觸發(fā)器：觸發(fā)回
調(diào)參數(shù)的事件：可編輯實例對象
綁定：綁定到關(guān)聯(lián)的 HTML 元素"focusout"eventUIthis
參數(shù)（可編輯實例）屬性：UI
text 字符串 - 當(dāng)前編輯的元素的文本內(nèi)容
字符串 - 當(dāng)前編輯的元素的內(nèi)HTML
字符串 - 元素的文本在編輯
之前的內(nèi)容 字符串 - 元素的內(nèi)HTML 在編輯
布爾值之前 - 如果 innerHTML 不等于原始
- 靜態(tài)（非實時） 元素
的節(jié)點列表 - 最新編輯的 HTML 元素htmltext_beforehtml_beforeisModifiedtrueelementselement
