window.getSelection() コードを使用しているときに、テキストを選択した後に小さな画像を表示するにはどうすればよいですか?
私が見つけた最も類似したものは、ユーザーのテキスト選択の隣に要素を配置するにはどうすればよいですか? しかし、それを適切に機能させることはできないようです:-sこれにちょっと慣れていないことも役に立ちません。
それを行うにはいくつかの簡単なコードが必要です。選択したテキストの近くにある限り、画像がどこに表示されるかは問題ではありません
-編集-
コメントで言ったように、アイデアは、選択したテキストの近くにボタン (最初に画像を考えましたが、ボタンの方が良い) を表示し (選択が行われた後)、選択されたものを引用するリンクを表示することです。ボタンが表示されなくなりました。
これは、テキスト選択を終了するときにマウス座標を引っ張って、表示するボタンのスタイルに x、y 座標を追加することで可能でしょうか?
-編集-
その座標のアイデアを念頭に置いて、私が望んでいたように動作させました。このhttp://motyar.blogspot.pt/2010/02/get-user-selected-text-with-jquery-and.htmlを見つけて、それで私はこれを思いつきました:
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;
}
$(document).ready(function() {
var blank = '',
selectionImage;
$('#mensagem').mouseup(function(e) {
var selection = getSelected();
if (!selectionImage) {
selectionImage = $('<button>').attr({
type: 'button',
title: 'Citar Texto seleccionado',
id: 'quote-place'
}).html("Citar").css({
"color": "red"
}).hide();
$(document.body).append(selectionImage);
}
$("#quote-place").click(function quote() {
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;
}).mousedown(function() {
if (selectionImage) {
selectionImage.fadeOut();
}
});
selectionImage.css({
top: e.pageY - 30,
//offsets
left: e.pageX - 13 //offsets
}).fadeIn();
});
});
http://jsfiddle.net/ordhor/2Gc8c/
<div>
ボタンが表示され続けるテキストを選択せずにクリックすると、問題が発生します。テキストを選択したときにのみ表示されるはずで、修正方法がわかりません...