次の Javascript コードがあります。
function makeEditableAndHighlight(colour) {
sel = window.getSelection();
if (sel.rangeCount && sel.getRangeAt) {
range = sel.getRangeAt(0);
document.designMode = "on";
sel.removeAllRanges();
sel.addRange(range);
}
if (!document.execCommand("HiliteColor", false, colour)) {
document.execCommand("BackColor", false, colour);
}
document.designMode = "off";
}
// This is the highlighting function. It takes a color as an argument.
function highlight(colour) {
var range, sel;
if (window.getSelection) {
try {
if (!document.execCommand("BackColor", false, colour)) {
makeEditableAndHighlight(colour);
window.getSelection().removeAllRanges();
}
} catch (ex) {
makeEditableAndHighlight(colour)
}
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
range.execCommand("BackColor", false, colour);
}
}
// This returns the highlight to transparent (no highlighting) when the user clicks away in the document.
function body() {
document.getElementsByTagName("body")[0].addEventListener(
"click",
function(event){
highlight('transparent');
}
);
}
それはこのように動作します:
ページでテキストが選択されている場合、ボタン (拡張機能のポップアップなど) を押すと、そのテキストは黄色で強調表示され、自動的に選択が解除されます。
そこで問題が発生します。
テキストは自動的に選択解除されるため、ハイライトを同じテキストに戻すことはできません (選択範囲がなくなったため)
したがって、この質問の焦点は最後の部分、つまり次の部分にあります。
function body() {
document.getElementsByTagName("body")[0].addEventListener(
"click",
function(event){
highlight('transparent');
}
);
}
これは、同じテキストを選択してドキュメント内の任意の場所をクリックした場合にのみ機能します。
ドキュメント内の任意の場所をクリックして、強調表示されたテキストを元に戻すことができるようにしたいです (元が不可能な場合は透明にします)。
ここでは選択がないため、任意のテキストを目指しています。
したがって、基本的にこの関数は次のように機能するはずです。
選択が存在し、ボタンが押された場合 > 選択を強調表示し、すべての選択を自動的に削除します。
ページ内のどこかでクリックが登録されたら、選択範囲の有無に関係なく、テキストの強調表示をすべて削除します。
繰り返しますが、このコードは、最後の部分である「存在するハイライトを削除する」部分まで非常にうまく機能しているようです。