javascript 在 ContentEditable DIV 中获取选定的文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18435088/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get Selected Text In ContentEditable DIV?
提问by Tom Maxwell
So I have a contenteditable div in my Rails app, and need to be able to display a little popup above text when it's highlighted. Currently I have code that works, and it displays the highlighted text in an alert. However, the function executes on mouseup, so when you click into the div to start typing or highlighting, it throws an empty alert.
所以我在我的 Rails 应用程序中有一个 contenteditable div，并且需要能够在突出显示文本时在文本上方显示一个小弹出窗口。目前我有有效的代码，它在警报中显示突出显示的文本。但是，该函数在鼠标向上时执行，因此当您单击 div 以开始键入或突出显示时，它会抛出一个空警报。
Here's my code:
这是我的代码：
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?");
};
});
How do I prevent jQuery from executing the function when the user clicks into the contentEditable div? I only want it to execute when actual text is highlighted.
当用户单击 contentEditable div 时，如何防止 jQuery 执行该函数？我只希望它在突出显示实际文本时执行。
回答by Tarun Dugar
You can compare window.getSelection().anchorOffsetand window.getSelection().extentOffsetto see if they are equal. If they are, then it was just a normal click.
您可以比较window.getSelection().anchorOffset并window.getSelection().extentOffset查看它们是否相等。如果是，那么这只是一次正常的点击。
回答by Tarun Dugar
The following will return true if nothing is selected.
如果未选择任何内容，以下将返回 true。
Inspired from @Tarun Dugar. But didn't work in all browsers. The following worked.
灵感来自@Tarun Dugar。但并非在所有浏览器中都有效。以下工作。
window.getSelection().focusOffset == window.getSelection().anchorOffset;
回答by Mendy
You can simply check if the Selection.toString()method returns an empty string
您可以简单地检查该Selection.toString()方法是否返回空字符串
if(window.getSelection().toString()){
// do something
}
回答by Training at Manorama
回答by DexTer
There is "selectstart" event which fires when user starts selection. There is no selection end event but you can listen for mouseup event after "selectstart" event fired to make sure selection has occurred.
当用户开始选择时会触发“selectstart”事件。没有选择结束事件，但您可以在“selectstart”事件触发后监听 mouseup 事件，以确保选择已经发生。
Edit:
编辑：
回答by hammett
Just check if the selection is empty: if ($.trim( text) != '') ...
只需检查选择是否为空： if ($.trim( text) != '') ...
