javascript JQuery 切换属性 contentEditable = "true"

JQuery Toggle property contentEditable = "true"

提问by Satch3000

I am using contenteditable="true" in a div

我在 div 中使用 contenteditable="true"

What I want to do it to toggle true and false on this attribute everytime I click on a div.

每次我点击一个 div 时，我想要做的是在这个属性上切换 true 和 false。

example:

例子：

$( "#mylabel" ).click(function() {
    $('#editablediv').attr('contenteditable','false');
});

I tried:

我试过：

$( "#mylabel" ).toggle(function() {
    $('#editablediv').attr('contenteditable','false');
});

but that didn't work

但这没有用

How can I do this?

我怎样才能做到这一点？

回答by Andrei CACIO

Try this way:

试试这个方法：

$( "#mylabel" ).click(function() {
    var value = $('#editablediv').attr('contenteditable');

    if (value == 'false') {
        $('#editablediv').attr('contenteditable','true');
    }
    else {
        $('#editablediv').attr('contenteditable','false');
    }
});

Keep me posted, hope this helped

关注我，希望能帮到你

回答by Vishal Kumar Sahu

Here is shorter than your shortest (Reusability and Character Count):

这里比最短的（可重用性和字符数）短：

function editTheElement() {
    var a = "contenteditable";
    $(this).attr(a) === 'true' ? $(this).attr(a,'false') : $(this).attr(a, 'true');
}

or still

或者仍然

function editTheElement(e) {
    var a = "contenteditable";
    e.attr(a) === 'true' ? e.attr(a,'false') : e.attr(a, 'true');
}

or

或者

function editTheElement(e) {
    var a = 'contenteditable';
    var v= e.attr(a);
    e.attr(a,!v);
}

or

或者

function editTheElement(e) {
    var a = 'contenteditable';
    e.attr(a,!e.attr(a));
}

or

或者

function editTheElement(e) {
    e.attr('contenteditable',!e.attr('contenteditable'));
}

JS is fun :)

JS 很有趣 :)

回答by Regular Joe

In 2018 at least, most of these answers aren't working past the first on/off in Chrome 68. It's something with how jQuery or the browser is reading the value of this attribute, because the logic is pretty simple.

至少在 2018 年，这些答案中的大多数在 Chrome 68 中的第一个开/关之后都不起作用。这与 jQuery 或浏览器如何读取此属性的值有关，因为逻辑非常简单。

The code I found to work was

我发现工作的代码是

var el = $("{your selector}")
(el.attr('contenteditable') ?
  el.removeAttr('contenteditable') :
  el.attr('contenteditable', true));

Demo Fiddle

演示小提琴

回答by daniel

shortest solution I found:

我发现的最短解决方案：

$('[contenteditable]').attr('contenteditable') === 'true' ? 
$('[contenteditable]').attr('contenteditable', 'false') : 
$('[contenteditable]').attr('contenteditable', 'true');

回答by konnigun

$('#mylabel').click(function() {
    editable = $('#editablediv').attr('contenteditable');
    $('#editablediv').attr('contenteditable', !(editable == 'true'));
});