JS清除选择内容的方法


Posted in Javascript onJanuary 29, 2015

本文实例讲述了JS清除选择内容的方法。分享给大家供大家参考。具体分析如下:

今天在做一个DIV拖动的效果,发现在拖动的时候会选中页面中的文本,于是找了一下JS清除选择的内容的相关信息。

在得到的结果中发现: 在谷歌、火狐、Opera浏览器中,window对象有getSelection属性,而在IE中没有。IE中的document对象有selection属性,因此清除页面中选择的内容也就可以得到解决。

在谷歌、火狐、Opera浏览器中我们可以很容易的通过 window.getSelection().removeAllRanges() 清除选中的内容,在IE中我们可以通过 document.selection.empty() 来清除选中的内容。

于是我们可以这样写:

var clearSlct= "getSelection" in window ? function(){
 window.getSelection().removeAllRanges();
} : function(){
 document.selection.empty();
};

"getSelection" in window 用于判断window对象中是否含有getSelection属性,如果为true则说明当前浏览器支持getSelection,也即浏览器为非IE浏览器,反之亦然。

如果我们想要禁止用户选中页面中的内容,我们可以这样做:

//防止鼠标选中内容(当鼠标松开时清除选中内容)
window.onmouseup=function(){
 clearSlct();
}
   
//防止通过键盘选中内容(当按键松开时清除选中内容)
window.onkeyup=function(){
 clearSlct();
}
 
//使用jQuery的方法
$(window).on("mouseup keyup",function(){
 clearSlct();
});

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript 面向对象的JavaScript类
May 04 Javascript
jquery ajax 局部无刷新更新数据的实现案例
Feb 08 Javascript
深入解读JavaScript中的Iterator和for-of循环
Jul 28 Javascript
JS实现的网页背景闪电闪烁效果代码
Oct 17 Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 Javascript
jQuery的promise与deferred对象在异步回调中的作用
May 03 Javascript
jQuery实现根据滚动条位置加载相应内容功能
Jul 18 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
JS实现闭包中的沙箱模式示例
Sep 07 Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 Javascript
vue项目实现减少app.js和vender.js的体积操作
Nov 12 Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 #Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 #Javascript
jQuery中$.each使用详解
Jan 29 #Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 #Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 #Javascript
JSON格式的键盘编码对照表
Jan 29 #Javascript
js的window.showModalDialog及window.open用法实例分析
Jan 29 #Javascript
You might like
php简单随机字符串生成方法示例
2017/04/19 PHP
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
ASP中进行HTML数据及JS数据编码函数
2009/11/11 Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
2010/05/24 Javascript
理解Javascript_14_函数形式参数与arguments
2010/10/20 Javascript
Javascript setInterval的两种调用方法(实例讲解)
2013/11/29 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
利用JavaScript阻止表单提交的两种方法
2016/08/11 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
移动前端图片压缩上传的实例
2017/12/06 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
Python的装饰器模式与面向切面编程详解
2015/06/21 Python
Python如何实现MySQL实例初始化详解
2017/11/06 Python
python使用pandas实现数据分割实例代码
2018/01/25 Python
python list是否包含另一个list所有元素的实例
2018/05/04 Python
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
Python2与Python3的区别点整理
2019/12/12 Python
Python简单实现区域生长方式
2020/01/16 Python
如何将Pycharm中调整字体大小的方式设置为"ctrl+鼠标滚轮上下滑"
2020/11/17 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
Fabletics官网:美国运动服饰品牌,由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
《最佳路径》教学反思
2014/04/13 职场文书
给校长的建议书200字
2014/05/16 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书
教师学习中国梦心得体会
2016/01/05 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技