HTML 5使用javascript切換contenteditable屬性

Question

enter code here我正在嘗試使用這樣的功能在線編輯某些內容

function toggle_editable (div, cssclass) {

var classToEdit = document.getElementsByClassName(cssclass)

    for (i = 0;classToEdit.length; i++) {

        if (classToEdit[i].contentEditable == false) {
            classToEdit[i].contentEditable = true ;
        }
        if (classToEdit[i].contentEditable == true) {
            classToEdit[i].contentEditable = false ;
        }
    }
}

classToEdit是具有相同類名或任何document.getElementsByClassName（cssclass）返回的HTML元素的集合。

通過調試器時，它會跳過行

classToEdit[i].contentEditable == true

以及越線

 classToEdit[i].contentEditable == true

並且不會在if語句后的花括號中執行代碼

但是這有效-這意味着它毫不猶豫地設置了contenteditable屬性

classToEdit.contenteditable = true;

以及這個

classToEdit.contenteditable = false;

（很明顯）

這似乎也沒有效果

classToEdit.contenteditable = !classToEdit.contenteditable 

有人嗎？

ps為什么是循環

Answer 1

您在此處創建了一個無限循環：

for (i = 0;classToEdit.length; i++) {

應該：

for (var i = 0; i < classToEdit.length; i++) {

但是，如果您說classToEdit.contenteditable = true “有效”，則必須定義“不工作/正在工作”，因為如果classToEdit是HTMLCollection，則該代碼段不一定會按照您的預期做。

看來您想切換contentEditable值，可以這樣進行：

for (var i = 0; i < classToEdit.length; i++) {
    if (classToEdit[i].contentEditable == false) {
        classToEdit[i].contentEditable = true ;
    } else { // Notice else here, no need for another check
        classToEdit[i].contentEditable = false;
    }
}

或根本就沒有if ：

classToEdit[i].contentEditable = !classToEdit[i].contentEditable;

在當前值為false的情況下，您當前的代碼會將值切換回原始值。

Answer 2

HTMLElement.contentEditable返回一個字符串，而不是布爾值。

因此，您要標識可編輯字段的狀態是：

// Incorrect
classToEdit[i].contentEditable == true
// Coorect
classToEdit[i].contentEditable === 'true'

如果您想知道字段的狀態，則更好的是使用HTMLElement.isContentEditable ，它返回一個布爾值：

classToEdit[i].contentEditable = !element.isContentEditable

重構以上內容的另一種方法：

function toggleContentEdit() {
    var editableFields = document.getElementsByClassName('editable');

    [].forEach.call(editableFields, function(field){
        var isEditable = field.isContentEditable;
        field.setAttribute('contenteditable', !isEditable);
    });
};

JSFiddle： http : //jsfiddle.net/6qz3aotv/