javascript - check that contenteditable div is empty or not - Stack Overflow

admin管理员组

文章数量:1345903

I have a content-editable div that works as Textarea.

<div id="divThatYouCanWriteStuffIn" contenteditable="true" class="ibox-content col-lg-12">
</div>

Now I want check whether this div is empty or not, for validations.

What I used is as below.

 if ($('#divThatYouCanWriteStuffIn')[0].innerText == "") {
        alert("Please update your wall, then post.")
        return false;
  }

But it's not working if user just clicked enter in div. Same way I have used

 if ($('#divThatYouCanWriteStuffIn')[0].innerText.length <= 1) {
        alert("Please update your wall, then post.")
        return false;
    }

$('#divThatYouCanWriteStuffIn').html()

But it also has break tags inside div, as it takes blank as break

So, is there any way to check that editable div is not empty and has some proper text?

I have a content-editable div that works as Textarea.

<div id="divThatYouCanWriteStuffIn" contenteditable="true" class="ibox-content col-lg-12">
</div>

Now I want check whether this div is empty or not, for validations.

What I used is as below.

 if ($('#divThatYouCanWriteStuffIn')[0].innerText == "") {
        alert("Please update your wall, then post.")
        return false;
  }

But it's not working if user just clicked enter in div. Same way I have used

 if ($('#divThatYouCanWriteStuffIn')[0].innerText.length <= 1) {
        alert("Please update your wall, then post.")
        return false;
    }

$('#divThatYouCanWriteStuffIn').html()

But it also has break tags inside div, as it takes blank as break

So, is there any way to check that editable div is not empty and has some proper text?

• javascript
• jquery

Share Improve this question Follow edited May 6, 2016 at 10:06 Bhugy 71133 gold badges88 silver badges2323 bronze badges asked May 6, 2016 at 9:58 BharatBharat 6,09544 gold badges4141 silver badges6565 bronze badges 5

• jsfiddle/k2667f5q – Rajaprabhu Aravindasamy Commented May 6, 2016 at 10:04
• FYI, by definition, any white space makes it not empty. What you want is to trim its content. BUT what about any empty/void HTML element inside this contenteditable div? Are you considering it as empty or not??? Now why don't you use a textarea? contenteditable cannot be used as teaxtarea replacement for many many reasons, especially because different browser support/behaviour – A. Wolff Commented May 6, 2016 at 10:04
• @A.Wolff first i cannot use textarea as it width is fixed..and second if there is no text then all html tags not needed so, it must act as blank..and thanks for your support. – Bharat Commented May 6, 2016 at 10:08
• @Bharat first i cannot use textarea as it width is fixed.. I'm not sure what you mean?! .and second if there is no text then all html tags not needed so, it must act as blank.. Still, i don't understand what you mean?! Can you provide concrete sample replicating your issue pare to expected behaviour? – A. Wolff Commented May 6, 2016 at 10:14
• sure.................. – Bharat Commented May 6, 2016 at 10:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

You can use the text() method to get the relevant content(content without html tags)

  if ($('#divThatYouCanWriteStuffIn').text().trim().length == 0) {
    alert("empty");
  }

.trim() function removes all the white spaces and newline characters from the beginning and end of the content.

Fiddle

Incase your contenteditable div contains html. I used this method below

divHtml = $('div#divThatYouCanWriteStuffIn').html();
checkEmpty = divHtml.replace(' ', '').replace('<br>', '');
if(checkEmpty.length == 0){
    alert('empty');
}

Replace all space with nothing and all line breaks <br> with nothing also

本文标签： javascriptcheck that contenteditable div is empty or notStack Overflow