javascript - 将 DIV 用作按钮时保持文本选择

标签 javascript jquery selection textselection

也许这是浏览器相关的问题?我现在正在使用 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 后保持文本选择?

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

最佳答案

一个简单的选择是使用 mousedown 而不是 click。但是,这与按钮的 native 行为不同,按钮的 native 行为是在释放鼠标按钮时触发操作,因此不是很好的 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>

关于javascript - 将 DIV 用作按钮时保持文本选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11786401/

相关文章:

javascript - 按字母顺序排序项目

javascript - d3 通过 id 获取 rect 属性

javascript - 使用 JavaScript 查找下一个标题的标记名和索引

javascript - (Object instanceof Function) 和 (Function instanceof Object) 怎么都是真的?

javascript - Meteor - 全局 keydown 后找到集合?

javascript - 关闭 Bootstrap UI 模态窗口时 'reason' 参数的可能值是多少?

jquery - 如何执行传递 id 而不是名称的 jQuery 自动完成?

javascript - 我怎么知道 iframe/popup 内容已加载/准备好?

algorithm - 为什么选择算法的运行时间是 O(n)?

java - jlist get 和 set 选择损坏?