javascript - 空の contenteditable 要素のブール値は true と評価されます

Question

次の機能を持つ contenteditable 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

不要な空白をすべて削除します。