Question

所以我在我的Rails应用程序中有一个令人满意的div，并且需要能够在突出显示时在文本上方显示一个小弹出窗口。目前我的代码有效，并在警报中显示突出显示的文本。但是，该函数在mouseup上执行，因此当您单击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时，如何阻止jQuery执行该功能？我只希望它在突出显示实际文本时执行。

Answer 1

您可以比较window.getSelection().anchorOffset和window.getSelection().extentOffset，看看它们是否相同。如果是，则只是正常点击。

Answer 2

如果未选择任何内容，则以下内容将返回true。

受到@Tarun Dugar的启发。但是并不适用于所有浏览器。以下工作。

window.getSelection().focusOffset == window.getSelection().anchorOffset;

Answer 3

您只需检查Selection.toString()方法是否返回空字符串

if(window.getSelection().toString()){
    // do something
}

Answer 4

尝试

window.getSelection().anchorNode.data.substring( window.getSelection().anchorOffset,window.getSelection().extentOffset )

尝试工作示例Here。

Answer 5

当用户开始选择时会激活“selectstart”事件。没有选择结束事件，但您可以在“selectstart”事件触发后监听mouseup事件，以确保选择已发生。

编辑：

检查 - HTML Content Editable div: select text event

Answer 6

只需检查选择是否为空：if ($.trim( text) != '') ...

在ContentEditable DIV中获取所选文本？

6 个答案: