点击div全选中再点击取消全选div里面的文字
2016-11-15 14:06 改吧 阅读(3953) 评论(0) 编辑 收藏 举报想做一个就是点击一个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>0){ return false; }else{ console.log(888); 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"); } } })
恩,这样差不多就符合我的需求了