点击div全选中再点击取消全选div里面的文字
想做一个就是点击一个div然后实现的功能是div里面的文字都成选中状态,然后就可以利用浏览器的自带的复制功能,任意复制在哪里去了
在网上百度了一下
然后网上的答案感觉很大的范围
然后一些搜索
然后就锁定了一个答案
就是那个页面我忘记在哪里了
上我在页面上写的代码吧
$('.modal-body').click(function(){
var text=this;
if (document.body.createTextRange) {
var range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
} else {
alert("none");
}
})
就是这样了
网页上一开始是原生了
就是一个function里面放if else
然后我就在想怎么把这个放进jQuery里面去
然后我一开始是写了var text=$(this)
然后就开始报错
(index):281 Uncaught TypeError: Failed to execute 'selectNodeContents' on 'Range': parameter 1 is not of type 'Node'.(…)
就出来这个错误
然后就开始谷歌
为什么错误
然后就搜索到了可靠答案
就是来自stackoverflow
不得不说 这个网站太牛逼了
你只要搜索的正确 里面有很多答案 基本上我只要搜索一个问题然后页面上出来这个网站
我就觉得我的问题会得到解答
果然
然后这个网站告诉我的答案就是
var text=this而不是var text=$(this)
然后就完美解决了我的答案
然后也能执行了
网站上那个人是这样说的
因为if里面text是javascript对象
然后你要是$(this)的话就是一个jQuery对象,所以运行起来就会报错
厉害 佩服
后来我又发现了一个问题,那你一直是全选状态这样也不好吧
我看网上都是全选状态的时候就是再点击就可以取消全选
不是全选状态的时候再选择全选,这样的需求才是正确的嘛
所以上面那段代码已经不能满足我们了
所以再上代码
就是点击全选再点击取消全选
$('.modal-body').click(function(){
var text=this;
if(window.getSelection().toString().length>){
return false;
}else{
console.log();
if (document.body.createTextRange) {
var range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
} else {
alert("none");
}
}
})
恩,这样差不多就符合我的需求了
点击div全选中再点击取消全选div里面的文字的更多相关文章
- jquery点击添加样式,再点击取出样式
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- input radio点击选中再点击取消
这里主要说一下这个jquery中的data()方法,个人感觉这个方法平时挺少用到的,所以说一说,按照官方的解释就是 向元素附加数据,然后取回该数据; 嗯,是的,就是这么简单. 那这里说一下这个方法的使 ...
- js计时器,点击开始计时,再点击停止
点击倒计时开始,点击停止,再次点击又开始,再点停止... <i id=</i>秒 <em onclick="timeOpen();">开始</e ...
- Android:GridView中实现点击Item变色,再点击还原。
使用GridView时想实现点击其中的一个Item,该Item改变背景,再次点击Item变回原来的背景,网上搜了很多资料都没有看到类似的案例,但还是有所启发,现来分享我的做法. 首先,首先为GridV ...
- js 点击图片放大,再点击缩小还原
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue 循环多个标签,点击标签变色,再点击取消,可以同时点击多个
效果: <div class="relFacilityTitcon"> <i v-for="(item,index) in facilityList&q ...
- radio点击一下选中,再点击恢复未选状态
radio点击一下选中,再点击恢复未选状态 实现方式1: <input type="radio" id="cat" name="ca ...
- 常见问题1:默认div隐藏,点击按钮时出现,再点击时隐藏。
例:默认div隐藏,点击按钮时出现,再点击时隐藏. <a href="#" onclick="f('ycbc')"; >控制按钮</a> ...
- 在用easyui中做CRUD功能时,当删除一行或多行数据后再点击修改会提示你选中了多行,如何解决这个bug了?
在用easyui中做CRUD功能时,当删除一行或多行数据后再点击修改会提示你选中了多行,如何解决这个bug了? 在删除成功后,加上这句话就可以了:$("#dg").datagrid ...
随机推荐
- [WPF]有滑动效果的进度条
先给各位看看效果,可能不太完美,不过效果还是可行的. 我觉得,可能直接放个GIF图片上去会更好. 我这个不是用图片,而是用DrawingBrush画出来的.接着重做ProgressBar控件的模板,把 ...
- 仿Java的AtomicMarkableReference的AtomicMarkablePointer(C++)
//@author: Zou Xiaohang //@describe: this class is like AtomicMarkableReference which is in java con ...
- 后端码农谈前端(CSS篇)第三课:选择器
一.选择器 1.ID选择器: 语法:首先,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号.请看下面的规则: *#intro {font-weight:bold;} 与类选择器一样,ID 选择器 ...
- tomcat架构之-----基本概念
一直都没有搞明白tomcat中server.service.Engine.Host.Context概念的意义,最近认真看了<Tomcat 6 Developer Guide>,有了进一步的 ...
- HTML5移动Web开发(十)——在浏览器中启动手机原生应用
用户可以在浏览器中启动移动设备的原生应用程序,比如地图.电话.短信等,具体能够启动哪些应用程序,这取决于该移动设备上哪些原生应用是否允许从浏览器启动. 新建ch02r05.html <!doct ...
- 《淘宝技术这十年》之LAMP架构的网站
本文节选自<淘宝技术这十年>一书,子柳(赵超)著,由电子工业出版社出版.作者的系列博文:从P1到P7--我在淘宝这7年 2003年4月7日,马云在杭州成立了一个神秘的组织.他叫来十位员工, ...
- Android中的FragmentManager的问题
Fragment是构成灵活UI的重要部分.最近学习到Fragment的使用时候,碰到一个问题.主程序程序布局非常简单: <?xml version="1.0" encodin ...
- 局部页面传值Model
1:新建个局部页面,将这里页面的Model数据传递过去,在局部页面进行和一般页面一样的操作就行. 这里和HTML.Action不一样,对于HTML.action来说,它是新建了一个action来进行传 ...
- php实现留言功能
php真的挺好玩的! 先写出前台页面index.php: <!DOCTYPE html> <html lang="en"> <head> < ...
- 实现多表关联来方便你的SELECT查询功能
这次来学习一下多表关联.比如在数据中创建下面几张表,你可以从主键PRIMARY KEY与外键FOREIGN KEY来看到这几张表它们之间的关系. 场所表[dbo].[SixS_Location]: 主 ...