Question

我正在为我的某个应用构建一个简单的博客式功能，并使用HTML5 contenteditable属性，因为它很干净。但是，我现在需要做的是当用户在可信任的div中突出显示某些文本时，需要在其上方显示弹出窗口。现在我有一个函数可以获取所选文本，该文本绑定到DIV的mouseup（）。但是，当我点击contenteditable div时，该函数被触发。

这是我的代码：

function getSelected() {
            if (window.getSelection) {
                return window.getSelection();
            }
            else if (document.getSelection) {
                return document.getSelection();
            }
            else {
                var selection = document.selection && document.selection.createRange();
                if (selection.text) {
                    return selection.text;
                }
                return false;
            }
            return false;
        };

$("#content-create-partial").bind("mouseup", function(){
                var text = getSelected();
                if(text) {
                    console.log(text);
                }
                else{
                    console.log("Nothing selected?");
                };
            });

当用户点击contenteditable div时，以及只有当他们突出显示某些文字时，如何防止调用被触发？

Answer 1

$("#content-create-partial").bind("mouseup", function(){
 if (document.getSelection) {
                var text = getSelected();
                if(text) {
                    console.log(text);
                }
                else{
                    console.log("Nothing selected?");
                }


  } 
         });

Answer 2

将其转换为字符串（.toString()，在所选字符串为空的情况下使用trim()，并在mouseup事件中检查所选字符串的长度。

 $("#content-create-partial").bind("mouseup", function(){
        var text = getSelected().toString().trim();
        if(text.length>0) {
            console.log(text);
        }
        else{
            console.log("Nothing selected?");
        };
    });

在contenteditable div中突出显示文本上方的弹出窗口？

2 个答案: