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

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

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

我有javascript / jQuery / ajax所有设置…当我通过控制台测试它时它就像一个魅力。

ie – 我选择一些文本，然后运行此命令。

alert(getSelected()); 

我得到一个包含所选字符的警报弹出窗口。 ……所以它在理论上有效。

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

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

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

开放给任何和所有解决方案！ 谢谢！

Answer 1

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

另一种选择是使用专有CSS属性和IE和Opera的不可选属性的组合使可点击元素不可选，这可以防止点击清除选择：

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

CSS：

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

HTML：

Answer 2

尝试下面的内容：

 $('#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 3

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

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

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

Answer 4

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