检查contenteditable div是否为空

Question

检查contenteditable div是否为空

5

我有一个可编辑的div，它可以像文本框一样使用。

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

现在我想检查这个 div 是否为空，以进行验证。

我使用的代码如下。

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

但是如果用户只是在div中点击了回车键，它就不起作用了。我使用的方法也是一样的。

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

$('#divThatYouCanWriteStuffIn').html()

但是它在div内部有换行标签，因为空格会被视为换行符

那么，有没有办法检查可编辑的div不是空的，并且包含一些适当的文本？

- Bharat

https://jsfiddle.net/k2667f5q/ - Rajaprabhu Aravindasamy

根据定义，任何空格都会使它不为空。你想要的是修剪其内容。但是，对于此contenteditable div内部的任何空/无效HTML元素呢？你是否认为它为空？现在为什么不使用textarea？contenteditable由于不同的浏览器支持和行为，不能用作textarea的替代品。 - A. Wolff

@A.Wolff 首先，我不能使用文本区域，因为它的宽度是固定的。其次，如果没有文本，则不需要所有的HTML标记，因此它必须作为空白处理。感谢您的支持。 - Bharat

@Bharat 首先，我不能使用文本区域，因为它的宽度是固定的... 我不确定你的意思是什么？.其次，如果没有文本，则所有HTML标记都不需要，因此它必须作为空白处理.. 仍然，我不明白你的意思是什么？你能提供一个具体的示例来复制你的问题并与预期行为进行比较吗？ - A. Wolff

请提供需要翻译的具体内容。 - Bharat

2个回答

2

如果您的可编辑内容 div 包含 HTML。我使用下面的方法：

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

将所有空格替换为无内容，将所有换行符<br>也替换为无内容

- KANAYO AUGUSTIN UG

1

@Bharat 这应该是被接受的答案，因为它考虑了非文本（HTML元素）。 - Cheyenne Forbes

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Anoop Joshi P · Accepted Answer

您可以使用text()方法获取相关内容（不带HTML标签的内容）。

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

.trim()函数会从内容的开头和结尾删除所有空格和换行符。

演示