恢复网页上文字的选择功能
2013-08-15 09:56
162 查看
最近在做一个地图相关的项目,用到BAIDU,GOOGLE MAP API。
为了节省资源地图上的提示框我没直接使用API中的InfoWindow,而是继承抽象基类Overlay(BAIDU),OverlayView(google maps)封装实现的,如下图所示:
因为JS事件冒泡,这个提示框中的文字部分不能使用鼠标选择复制,因为提示框中鼠标事件直接调用了地图的鼠标事件。
在某个炎热的夏天,用户提出需要选择复制提示框中的文字内容,泪崩~~~这个功能不是我限制的呀,是地图事件阻止的(这样和用户解释他可能听不太懂-_-!)
本着用户就是上帝的原则需要修改成文字可选,于是想到阻止JS事件冒泡
假设提示框(infobox)的id为gmnoprint
这样处理后在IE浏览器可以选择文字了,但chrome 、firefox浏览器还是不行,在不断调试、翻阅资料后才发现还有几个CSS属性可以控制文字选择:
unselectable="off"
<标签名 unselectable=on> - 禁止选择
Internet Explorer 5.5 追加的属性,可以禁止选择元素的内容。<b> 和 <p> 等等,大多数的标签都能够使用。子元素无法继承此属性。
on 禁止选择。
off 解除禁止选择。默认值。
-moz-user-select:text;
-moz-user-select属性 适用于Firefox
设置用户是否可以选择元素内容。
语法 -moz-user-select: none | text | all | element
auto 用户可以选择元素内容
none 用户不能选择元素内容
text 用户可以选择元素文本
-webkit-user-select:text;
-webkit-user-select 属性 适用于Chrom
设置用户是否可以选择元素内容。
语法 webkit-user-select: auto | none | text
auto 用户可以选择元素内容
none 用户不能选择元素内容
text 用户可以选择元素文本
最终DIV的代码如下:
这样终于完成了用户要求的文字能够选择、复制功能
就这么一个小小的功能几乎花费了我一天的时间,不断的调试、不断的查找资料。
用户一句话累死程序员呀~~~
为了节省资源地图上的提示框我没直接使用API中的InfoWindow,而是继承抽象基类Overlay(BAIDU),OverlayView(google maps)封装实现的,如下图所示:
因为JS事件冒泡,这个提示框中的文字部分不能使用鼠标选择复制,因为提示框中鼠标事件直接调用了地图的鼠标事件。
在某个炎热的夏天,用户提出需要选择复制提示框中的文字内容,泪崩~~~这个功能不是我限制的呀,是地图事件阻止的(这样和用户解释他可能听不太懂-_-!)
本着用户就是上帝的原则需要修改成文字可选,于是想到阻止JS事件冒泡
假设提示框(infobox)的id为gmnoprint
var div = document.getElementById('gmnoprint'); div.onselectstart = function(e){ stopBubble(e); } div.onclick = function(e){ stopBubble(e); } div.onmousedown = function(e){ stopBubble(e); } div.onmousemove = function(e){ stopBubble(e); } div.onmouseup = function(e){ stopBubble(e); } //阻止事件冒泡 function stopBubble(e){var e=window.event||e;e.stopPropagation?e.stopPropagation():e.cancelBubble=true;}
这样处理后在IE浏览器可以选择文字了,但chrome 、firefox浏览器还是不行,在不断调试、翻阅资料后才发现还有几个CSS属性可以控制文字选择:
unselectable="off"
<标签名 unselectable=on> - 禁止选择
Internet Explorer 5.5 追加的属性,可以禁止选择元素的内容。<b> 和 <p> 等等,大多数的标签都能够使用。子元素无法继承此属性。
on 禁止选择。
off 解除禁止选择。默认值。
-moz-user-select:text;
-moz-user-select属性 适用于Firefox
设置用户是否可以选择元素内容。
语法 -moz-user-select: none | text | all | element
auto 用户可以选择元素内容
none 用户不能选择元素内容
text 用户可以选择元素文本
-webkit-user-select:text;
-webkit-user-select 属性 适用于Chrom
设置用户是否可以选择元素内容。
语法 webkit-user-select: auto | none | text
auto 用户可以选择元素内容
none 用户不能选择元素内容
text 用户可以选择元素文本
最终DIV的代码如下:
<div width="300" id="gmnoprint" unselectable="off" style="-moz-user-select:text;cursor:auto;-webkit-user-select:text;">...</div>
这样终于完成了用户要求的文字能够选择、复制功能
就这么一个小小的功能几乎花费了我一天的时间,不断的调试、不断的查找资料。
用户一句话累死程序员呀~~~
相关文章推荐
- 快捷选择网页大段文字
- 禁止网页上的文字被选择
- 网页禁止右键,选择文字,拖甩鼠标破解代码
- [置顶] android阅读器长按选择文字功能实现代码
- android阅读器长按选择文字功能实现代码
- Inno Setup在安装完成页面中加入选择打开网站/网页的功能
- JS实现让访问者自助选择网页文字颜色的方法
- iOS 开发 解决UITableViewcell单选动态改变cell文字和背景颜色的功能,且第一次默认选择第一个cell
- JS实现让访问者自助选择网页文字颜色的方法
- 禁用各种网页限制,包含右键,复制,选择文字。
- 简单的IE内核多页浏览器(支持解锁右键锁定和文字选择复制锁定支持网页截成图片)
- 网页中选择功能
- 修改网页文字选择默认的蓝色
- 使用DIV+CSS布局网页后,容器内的文字不可选择的解决方案
- 用javascript实现网页地区选择功能
- Android 自定义Textview实现文字两端对齐功能和长按自由选择文字弹出自定义ActionMenu功能(一)
- 网页取消禁止选择、复制功能
- 双SD卡切换(SD SWAP) 方案,如何恢复“设置->存储->默认存储器”的用户选择功能
- php--------网页开发实现微信JS的(定位,地图显示,照片选择功能)
- 给您的文字编辑程序添加一剂“后悔药”-使用RichTextBox控件提供用户编辑功能,加入类似word的“撤销”和“恢复”功能