Question

我有一些具有以下功能的contenteditable div：

$(".myDiv").on('blur', function() {
        if ($(this).text()) {

            // Do something

        } else { // i.e. $(this) is empty

            // Do something else
        }

如果myDiv输入文本，然后删除，则此方法正常。但是，如果页面加载时myDiv为空，则获得焦点，然后在没有输入任何文本的情况下再次丢失它，上面的函数计算结果为真。

例如，如果我这样做：

$(".myDiv").on('blur', function() {
            if ($(this).text()) {
                console.log('===== text =====');
                console.log($(this).text());
                console.log(typeof($(this).text()));
            } else {
                console.log('===== empty =====');
                console.log($(this).text());
                console.log(typeof($(this).text()));
            }

然后点击myDiv，输入一个值，然后点击，然后清除myDiv并再次点击，即可：

===== text =====
myText
string

===== empty =====
(en empty string)
string

但是如果我点击一个尚未包含文字的空myDiv，那么请点击此处而不输入任何内容：

===== text =====


string

为什么会这样？

===编辑===

所以我做了jsfiddle，但它没有我上面描述的相同问题。

==编辑==

我更新了jsfiddle以检查长度。

==最终编辑==

感谢那些把时间和精力投入其中的人。我最终这样做了：

if ($.trim($(this).text())) {
    // etc etc

删除所有不需要的空格，这有效。

Answer 1

jQuery选择器将为您提供一个包装HTML元素的jQuery对象，而不是实际的HTML元素本身。根据jQuery文档，它的长度将为您提供“当前匹配的元素数量”。在这种情况下，您的选择器将为您提供一个元素（myDiv）。这就是长度始终为1的原因。

您应该访问text属性的长度，因为这将为您提供正确的长度。

$('#2').text($(this).text().length);

查看此fiddle

空contenteditable元素的布尔值计算结果为true

1 个答案: