Question

我有一种情况，当我点击一个按钮时，我需要在点击之前进行当前选择。示例代码类似于

$('div#test').on('click', 'span', function () {
    sel = window.getSelection();
    $('div#out p').text(sel.toString());
});

此处显示了预期的行为 - http://jsfiddle.net/yvondtm/NH2DW/

单击图像按钮时，情况正常。如果您在单击图像之前进行选择，那么您将获得输出 - 这里它只是您选择的副本。

但是，如果单击文本按钮，选择将丢失，结果不会如预期的那样。看起来点击文本会移动光标，从而改变选择。

我已经检查了像this one这样的CSS解决方案来禁用选择，就像我放入小提琴-webkit-user-select: none;一样。它做了它所说的，但没有提供任何帮助 - 即使＆＃34;范围＆＃34;选择是不允许的，插入符号仍在移动！

我该如何解决这个问题？我是否必须找到一些方法将文本按钮转换为图像？

（使用js或jquery或css来实现它没问题。）

Answer 1

这里的问题是click事件之前的mousedown事件会清除所有现有选择 - 之后window.getSelection()返回空。要解决此问题，只需在可点击的<span>上停用文字选择，例如#sp

#sp {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

演示：http://jsfiddle.net/NH2DW/3/

即使用户在按下跨度后意外拖动鼠标，也会确保选择保持不变。涉及JavaScript但是。

$('div#di').on('click', 'span', function () {
    $('div#out p').text(selection);
});

var selection = '', onSelect = function(_event) {
    if($(_event.target).is(':not(div#di span)'))
        selection = window.getSelection().toString();
    else return false;
};
$(document).mouseup(onSelect).keyup(onSelect).mousedown(onSelect);

演示：http://jsfiddle.net/NH2DW/7/

Answer 2

$('div#di').on('click', 'span', function (e) {
    $('div#out p').html($(e.currentTarget).html());
});

Answer 3

在文本上叠加透明图像。因此，当您单击时，您正在对图像进行操作，就像它是图像按钮一样。

<div id="container">
    <span id="wrapper">
        <img src="transparent image" id="overlay_img" />
        <p id="button_text"> Or you can use transparent property </p>
    </span>
</div>

将'img#overlay_img'的CSS样式设为

position: absolute;
width: 100%; /* strech image to cover entire span */
height: 100%;
top: -1px; /* minor adjustments if the span has padding */
left: -1px;

可能的参考 - CONTENT OVERLAY WITH CSS

js应该像

$('div#container').on('click', 'span', function () {
    sel = window.getSelection();
    $('div#out p').text(sel.toString());
});

工作小提琴（叠加图像看起来很难看但有效） - http://jsfiddle.net/yvondtm/NH2DW/8/

Javascript：阻止鼠标单击事件移动光标（防止它改变选择）

3 个答案: