Question

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

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

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

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

alert(getSelected());

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

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

<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

一个简单的选择是使用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>

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事件，你就会再次取消选择它（你会注意到一旦鼠标被阻塞，蓝色背景选择部分就会消失），因此它什么都不返回。

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

4 个答案: