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 相关文章推荐
地震发生中逃生十大法则
May 12 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
Apr 07 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
Jan 09 Javascript
js解析json读取List中的实体对象示例
Mar 11 Javascript
向JavaScript的数组中添加元素的方法小结
Oct 24 Javascript
初步使用bootstrap快速创建页面
Mar 03 Javascript
一起学写js Calender日历控件
Apr 14 Javascript
详解如何更好的使用module vuex
Mar 27 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
layui动态绑定事件的方法
Sep 20 Javascript
JS实现分页导航效果
Feb 19 Javascript
token 机制和实现方式
Dec 15 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 图片上传代码
2011/09/13 PHP
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
php线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
基于PHP读取csv文件内容的详解
2013/06/18 PHP
php+ajax实现无刷新分页的方法
2014/11/04 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
PHP 扩展Memcached命令用法实例总结
2020/06/04 PHP
iframe子页面与父页面在同域或不同域下的js通信
2014/05/07 Javascript
jQuery多级弹出菜单插件ZoneMenu
2014/12/18 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
小程序视频列表中视频的播放与停止的示例代码
2018/07/20 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
jquery的$().each和$.each的区别
2019/01/18 jQuery
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
2020/11/13 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
在Python中使用SQLite的简单教程
2015/04/29 Python
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
Python时间的精准正则匹配方法分析
2017/08/17 Python
Python3生成手写体数字方法
2018/01/30 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
应届大学生的推荐信
2013/11/20 职场文书
员工试用期自我评价
2014/09/18 职场文书
教师节横幅标语
2014/10/08 职场文书
2014年语文教学工作总结
2014/12/17 职场文书