0

我有一些内容可编辑的 div，它们具有以下功能：

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

            // Do something

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

            // Do something else
        }

如果 myDiv 输入了文本，然后删除，这可以正常工作。但是，如果在页面加载时 myDiv 为空，获得焦点然后再次失去焦点而没有输入任何文本，则上述函数的计算结果为 true。

例如，如果我这样做：

$(".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

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

4

1 回答 1

0

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

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

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

看看这个小提琴

于 2013-05-13T13:04:52.387 回答