使用 DIV 作为按钮时保持文本选择

Question

也许这是与浏览器相关的问题？我现在在 Chrome 上...

我想要完成的是允许用户使用光标保存他们在页面上选择（突出显示）的文本。

我已经完成了 javascript/jQuery/ajax 的所有设置...当我通过控制台对其进行测试时，它就像一个魅力。

即- 我选择了一些文本，然后运行这个命令。

alert(getSelected());

我会收到带有所选字符的警报弹出窗口。 ...所以理论上可行。

但是 - 当我想使用按钮拨打电话时，发生的情况是文本选择首先消失，因此我无法查看/保存他们选择的内容。

<script>
$('#save').click(function(){
  var selected_text = getSelected();
});
</script>

<div id="save"><img src="the_save_button.jpg" height="50" width="50" /></div>

有没有办法在单击/单击“保存”DIV 后保持文本选择？

对所有解决方案开放！！谢谢！

Answer 1

试试下面的：

$('#save').click(function(){
   var selected_text = "";
   if (window.getSelection) {
        selected_text = window.getSelection();
   } else if (document.getSelection) {
        selected_text = document.getSelection();
   } else if (document.selection) {
        selected_text = document.selection.createRange().text; 
   }
   alert(selected_text)
});

DEMO

或：

$('#save').mousedown(function(){
   // ...
});

DEMO

Answer 2

当用户选择文本时，将其存储在一个全局变量中。确保在他们取消选择时不要删除它；该变量应保存用户选择的最后一个文本。然后按钮可以引用此文本。您可能也可以使用这样的东西：

$('html').click(function() {
    global_var = '';
});
$('the button').click(function(event) {
    event.stopPropagation();
});

允许删除文本，除非用户单击按钮。

Answer 3

一旦做出选择，您应该将它分配给一个变量并保存它，然后只使用按钮单击事件进行 ajax 查询。这里涉及的问题是，一旦单击事件启动，您就会再次取消选择它（一旦单击鼠标，您会注意到蓝色背景选择部分消失了），因此它什么也不返回。

Answer 4

一个简单的选择是使用mousedown 而不是click。但是，这与按钮的原生行为不同，后者是在释放鼠标按钮时触发一个动作，因此 UI 不是很好。

另一个选项是使用专有 CSS 属性和 IE 和 Opera 的 unselectable 属性组合使可点击元素不可选择，从而防止点击清除选择：

演示：http://jsfiddle.net/timdown/UUQJs/

CSS：

.unselectable {
    -khtml-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

HTML：

<div id="save" unselectable="on" class="unselectable"><img
   src="the_save_button.jpg" height="50" width="50" unselectable="on" /></div>