我正在编写一个Firefox插件,它会在单词被选中时触发。但是我需要一个脚本来检测单词何时被选中,不过我卡住了。例如,nytimes.com的文章中,当你选中一个单词时,参考图标就会弹出。然而,nytimes.com的脚本非常复杂。我只有16岁,也不是很擅长编程,所以那绝对超出了我的能力范围。
最简单的方法是在文档上检测mouseup
和keyup
事件,并检查是否选择了任何文本。以下内容适用于所有主流浏览器。
示例:http://www.jsfiddle.net/timdown/SW54T/
function getSelectedText() {
var text = "";
if (typeof window.getSelection != "undefined") {
text = window.getSelection().toString();
} else if (typeof document.selection != "undefined" && document.selection.type == "Text") {
text = document.selection.createRange().text;
}
return text;
}
function doSomethingWithSelectedText() {
var selectedText = getSelectedText();
if (selectedText) {
alert("Got selected text " + selectedText);
}
}
document.onmouseup = doSomethingWithSelectedText;
document.onkeyup = doSomethingWithSelectedText;
这里有一段脚本:
<script>
function getSelText()
{
var txt = '';
if (window.getSelection)
{
txt = window.getSelection();
}
else if (document.getSelection)
{
txt = document.getSelection();
}
else if (document.selection)
{
txt = document.selection.createRange().text;
}
else return;
document.aform.selectedtext.value = txt;
}
</script>
<input type="button" value="Get selection" onmousedown="getSelText()">
<form name="aform">
<textarea name="selectedtext" rows="5" cols="20"></textarea>
</form>
由Code Toad提供:
http://www.codetoad.com/javascript_get_selected_text.asp
在您的情况下,您希望在选择时调用此脚本,然后您可以以任何您希望的方式进行处理,例如使用AJAX请求获取相关信息,就像NYtimes可能会做的那样。
window.getSelection()
返回一个 Selection
对象,而不是一个字符串。 - Tim Down在我的情况下,我希望能够在一行的文本中突出显示并单击该行,然后将我发送到其他路由,例如“/entity/:id”;
我创建了一个检测鼠标是否突出显示一些文本的函数:
export const isHighlighting = () => {
// detects mouse is highlighting a text
return window.getSelection && window.getSelection().type === 'Range';
};
const handleClick = (id) => {
if (!isHighlighting() {
history.push(`/entity/${id}`)
}
}
{data.map((item) => (
<tr>
<td onClick={() => handleClick(item.id)}>{item.name}</>
</tr>
))}
通过这种方式,用户可以高亮名称字段,或单击其他位置进入 "/entity/:id"。
使用 rangy.js 和 jQuery:
$('#elem').on('keyup mouseup', function(){
var sel = rangy.getSelection()
if (sel.rangeCount === 0 || sel.isCollapsed) return
alert(sel.toString())
})
foo
,用户选择了其中一个,您如何知道用户选择的是哪个单词? - Jespertheendfoo
s)是动态生成的,那么您可以为每个foo
分配一些唯一的ID,然后您可以使用window.getSelection().getRangeAt(0).startContainer.parentNode.id
来获取特定foo
的ID。 - Raghav Gargkeypress
事件中实现自定义的最大长度功能,但如果输入框已经达到其最大长度,则仍应通过keypress
事件,如果有任何文本被突出显示。您的函数完美地完成了这项工作。 - Jacob Stamm