Tôi đang viết một addon Firefox được kích hoạt bất cứ khi nào một từ được tô sáng. Tuy nhiên tôi cần một kịch bản phát hiện khi một từ được tô sáng, và tôi bị kẹt. Một ví dụ sẽ là nytimes.com (khi bạn đang đọc một bài báo và bạn đánh dấu một từ, biểu tượng tham chiếu bật lên). Tuy nhiên, kịch bản nytimes.com là siêu phức tạp. Tôi 16 tuổi và không có nhiều lập trình viên, vì vậy đó chắc chắn là cách ra khỏi giải đấu của tôi.Javascript: Cách phát hiện xem một từ có được đánh dấu là
Trả lời
Đây là một kịch bản:
<script language=javascript>
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>
Courtesy của Bộ luật Toad:
http://www.codetoad.com/javascript_get_selected_text.asp
Trong trường hợp của bạn, bạn sẽ muốn gọi kịch bản này khi lựa chọn được thực hiện, và sau đó bạn Tuy nhiên, bạn có thể xử lý nó theo yêu cầu của AJAX để lấy thông tin liên quan, ví dụ như NYtimes có thể làm.
Cách dễ nhất để thực hiện việc này là phát hiện các sự kiện mouseup
và keyup
sự kiện trên tài liệu và kiểm tra xem có bất kỳ văn bản nào được chọn hay không. Sau đây sẽ làm việc trong tất cả các trình duyệt chính.
Ví dụ: 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;
Nhưng nếu bạn muốn phát hiện xem một từ cụ thể có được chọn không? Giả sử bạn có 'foo' trên trang nhiều lần và người dùng chọn' foo' làm cách nào để biết từ nào người dùng đã chọn? – Jespertheend
Sử dụng rangy.js và jQuery:
$('#elem').on('keyup mouseup', function(){
var sel = rangy.getSelection()
if (sel.rangeCount === 0 || sel.isCollapsed) return
alert(sel.toString())
})
Sử dụng đoạn mã sau
(function() {
"use strict";
var showSelectedText = function (e) {
var text = '';
if (window.getSelection) {
text = window.getSelection();
} else if (document.getSelection) {
text = document.getSelection();
} else if (document.selection) {
text = document.selection.createRange().text;
}
console.log(text.toString());
}
document.onmouseup = showSelectedText;
if (!document.all) {
document.captureEvents(Event.MOUSEUP);
}
})();
Tôi tiếp tục nhìn thấy mã này trên SO, và đó là sai: 'cửa sổ. getSelection() 'trả về một đối tượng' Selection', không phải là một chuỗi. –
@tim xuống không phải toàn bộ sự thật. Đối tượng có phương thức toString(). Khi một chuỗi được mong đợi một chuỗi được trả về, nếu không, khi bạn chỉ ra một đối tượng được trả về. https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection –
@TedCohen: Đúng là đối tượng 'Selection' có thực thi' toString() 'hợp lý nhưng phần còn lại của bạn bình luận không có ý nghĩa: đối tượng 'Selection' luôn được trả về nếu' window.getSelection' tồn tại (nó có trong tất cả các trình duyệt hiện đại). –