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

Posted 2023-03-06

【中文标题】使用 DIV 作为按钮时保持文本选择

【英文标题】：Maintain Text Selection When Using DIV as a button

【发布时间】：2012-07-31 22:50:53

【问题描述】：

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

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

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

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

alert(getSelected());

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

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

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

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

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

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

【问题讨论】：

你能发帖getSelected()吗？

【参考方案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

【参考方案2】：

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

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

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

【参考方案3】：

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

【参考方案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"   unselectable="on" /></div>

【讨论】：

非常感谢蒂姆！这些都是很好的答案。