3

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

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

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

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

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 后保持文本选择？

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

4

4 回答 4

7

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

另一种选择是使用专有的 CSS 属性和unselectableIE 和 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：

<div id="save" unselectable="on" class="unselectable"><img
   src="the_save_button.jpg" height="50" width="50" unselectable="on" /></div>
于 2012-08-02T23:14:25.913 回答
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)
});

演示

或者：

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

演示

于 2012-08-02T22:03:35.323 回答
0

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

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

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

于 2012-08-02T22:04:09.827 回答
0

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

于 2012-08-02T22:22:04.917 回答