CODEWITHSUNDEEP
jquerycontenteditable
afro360
afro360

Reputation: 620

Jquery if contenteditable=true event

Im trying to detect if the element I have clicked on is contentEditable. I have tried this:

$( "#thediv" ).hide();    
$(this).click(function() {
    if ($(this).is("[contenteditable='true']")) {
    return true;
    $( "#thediv" ).show();
    alert('hi');
} else if ($(this).is("[contenteditable='false']")) {
    return false;
    $( "#thediv" ).hide();
    alert('hi');            
}
});

AND

$( "#thediv" ).hide();  

$(this).click(function() {
    if ($(this).attr("contentEditable") == true) {  
        $( "#thediv" ).show();
        alert('yes');
    } else {
        $( "#thediv" ).hide();  
        alert('no');          
    }    
});

How can I get this to work?

Here's a fiddle

Upvotes: 3

Views: 9027

Answers (4)

user3685048
user3685048

Reputation: 119

this is not defined. Here Ya go http://jsfiddle.net/dqEE2/2/

$( "#hello" ).hide();  
$(function() {
    $("div").click(function() {
        if ($(this).attr("contentEditable") == "true") {
            $( "#hello" ).show();
            alert("yes");
        } else {
            alert("no");
          $( "#hello" ).hide(); 
        }
    });

Upvotes: 3

yun_cn
yun_cn

Reputation: 83

To use the element.isContentEditable will be the simplest solution.

$(".edit").on("click", function() {
  var status = document.getElementById("theContent").isContentEditable;
  $("#theContent").prop("contenteditable", !status);
});

Upvotes: 0

Tim Down
Tim Down

Reputation: 324507

The contenteditable attribute will tell you whether the element has an explicit value set for contenteditable. However, editability is inherited, so an element such as the <span> in the HTML below is editable but has no contenteditable attribute value:

<div contenteditable="true"><span>Some editable text</span></div>

What you need instead is the isContentEditable property, which does exactly what you want:

$(this).click(function() {
    if (this.isContentEditable) {
        // Do stuff
    }
});

Upvotes: 9

Felk
Felk

Reputation: 8224

have you tried using jQuery's attr? http://api.jquery.com/attr/ That might work

if ($(this).attr("contentEditable") == "true") {

EDIT: the following works just fine:

if ($(this).is("[contentEditable='true']")) {

afro360's problem was something different

Upvotes: 1

Related Questions