Question

我似乎无法弄清楚这一点。我有一个div，里面有一些文字。当用户选择它的部分（完全随机，无论他们想要什么）时，我想要一个小弹出窗口内的文本。

为了主动弹出，我可以这样做吗？ ...

$('#textdiv').click(function() {

但是，我如何才能获得所选/突出显示的文字？

Answer 1

jQuery在这里没什么用处，所以你需要纯JS来做选择抓取部分（功劳归this page）：

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;
}

你使用mouseup处理程序走在正确的轨道上，所以这就是我的工作：

$('#test').mouseup(function() {
    var selection = getSelected();

    if (selection) {
        alert(selection);
    }
});

现场演示：http://jsfiddle.net/PQbb7/7/。

Answer 2

我们刚刚发布了一个名为highlighter.js的jQuery插件，可以让你灵活地执行此操作。代码为https://github.com/huffpostlabs/highlighter.js，随时可以在github页面上提出任何问题。

Answer 3

你可以从基础DOM元素中获取它：

var start = $('#textdiv')[0].selectionStart;
var end = $('#textdiv')[0].selectionEnd;
var highlight = $('#textdiv').val().substring(start, end);
// Note the [0] part because we want the actual DOM element, not the jQuery object

此时，您只需将其绑定到click事件即可。我认为在这种情况下，mouseup是您要绑定的事件，因为用户单击并按住鼠标，然后在突出显示文本后将其释放。

问题是这不会触发仅使用键盘突出显示文本的用户。为此，您需要在元素上使用keyup并过滤右键击。

Answer 4

刚刚更新了第一个答案。试试这个

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;
}
/* create sniffer */
$(document).ready(function() {
	$('#my-textarea').mouseup(function(event) {
		var selection = getSelected();
        selection = $.trim(selection);
        if(selection != ''){
        $("span.popup-tag").css("display","block");
        $("span.popup-tag").css("top",event.clientY);
        $("span.popup-tag").css("left",event.clientX);
        $("span.popup-tag").text(selection);
        }else{
        $("span.popup-tag").css("display","none");
        }
	});
});

.popup-tag{
position:absolute;
display:none;
background-color:#785448d4;
color:white;
padding:10px;
font-size:20px;
font-weight:bold;
text-decoration:underline;
cursor:pointer;
-webkit-filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select any text :<br>
<textarea type="text" id="my-textarea" style="width:100%; height:200px;" >
While delivering a lecture at the Indian Institute of Management Shillong, Kalam collapsed and died from an apparent cardiac arrest on 27 July 2015, aged 83. Thousands including national-level dignitaries attended the funeral ceremony held in his hometown of Rameshwaram, where he was buried with full state honours.
</textarea>

<span class="popup-tag"></span>

请参阅：https://jsfiddle.net/arunmaharana123/kxj9pm40/

Answer 5

您需要一个事件监听器，用于监听mouseup事件。

var bubbleDOM = document.createElement('div');
bubbleDOM.setAttribute('class', 'selection_bubble');
document.body.appendChild(bubbleDOM);

// Lets listen to mouseup DOM events.
document.addEventListener('mouseup', function (e) {
  var selection = window.getSelection().toString();
  if (selection.length > 0) {
    renderBubble(selection);
  }
}, false);

// Close the bubble when we click on the screen.
document.addEventListener('mousedown', function (e) {
  bubbleDOM.style.visibility = 'hidden';
}, false);

// Move that bubble to the appropriate location.
function renderBubble(selection) {
  bubbleDOM.innerHTML = selection;
  bubbleDOM.style.visibility = 'visible';
}

如何在选择文本后弹出一个弹出窗口？

5 个答案: