想做一个就是点击一个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里面的文字的更多相关文章

  1. jquery点击添加样式,再点击取出样式

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. input radio点击选中再点击取消

    这里主要说一下这个jquery中的data()方法,个人感觉这个方法平时挺少用到的,所以说一说,按照官方的解释就是 向元素附加数据,然后取回该数据; 嗯,是的,就是这么简单. 那这里说一下这个方法的使 ...

  3. js计时器,点击开始计时,再点击停止

    点击倒计时开始,点击停止,再次点击又开始,再点停止... <i id=</i>秒 <em onclick="timeOpen();">开始</e ...

  4. Android:GridView中实现点击Item变色,再点击还原。

    使用GridView时想实现点击其中的一个Item,该Item改变背景,再次点击Item变回原来的背景,网上搜了很多资料都没有看到类似的案例,但还是有所启发,现来分享我的做法. 首先,首先为GridV ...

  5. js 点击图片放大,再点击缩小还原

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. vue 循环多个标签,点击标签变色,再点击取消,可以同时点击多个

    效果: <div class="relFacilityTitcon"> <i v-for="(item,index) in facilityList&q ...

  7. radio点击一下选中,再点击恢复未选状态

    radio点击一下选中,再点击恢复未选状态 实现方式1: <input   type="radio"   id="cat"   name="ca ...

  8. 常见问题1:默认div隐藏,点击按钮时出现,再点击时隐藏。

    例:默认div隐藏,点击按钮时出现,再点击时隐藏. <a href="#" onclick="f('ycbc')"; >控制按钮</a> ...

  9. 在用easyui中做CRUD功能时,当删除一行或多行数据后再点击修改会提示你选中了多行,如何解决这个bug了?

    在用easyui中做CRUD功能时,当删除一行或多行数据后再点击修改会提示你选中了多行,如何解决这个bug了? 在删除成功后,加上这句话就可以了:$("#dg").datagrid ...

随机推荐

  1. 快速入门系列--WebAPI--03框架你值得拥有

    接下来进入的是俺在ASP.NET学习中最重要的WebAPI部分,在现在流行的互联网场景下,WebAPI可以和HTML5.单页应用程序SPA等技术和理念很好的结合在一起.所谓ASP.NET WebAPI ...

  2. 有关try..catch..finally处理异常的总结

    //看一下下面的程序,你能正确的写出不同的testEx2()方法时,程序的最终打印出来的数据吗....先不要看下面的答案 public class ExceptionTest { public Exc ...

  3. 转载--linux filesystem structures

    In this article, let us review the Linux filesystem structures and understand the meaning of individ ...

  4. Web 开发人员和设计师必读文章推荐【系列三十】

    <Web 前端开发精华文章推荐>2014年第9期(总第30期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  5. 22套新鲜出炉的 Web & Mobile PSD 用户界面素材

    在这篇文章中,我们展示的是自由和清新的 UI 设计素材套件.这些线框图和 UI 设计工具包让设计师在设计用户界面原型的时候能够非常便利. Web 用户界面,移动用户界面和线框套件对设计师很有用,因为这 ...

  6. PetaPoco - 轻量级高性能的ORM框架(支持.NET Core)

    我们都知道ORM全称叫做Object Relationship Mapper,也就是可以用object来map我们的db. 而且市面上的orm框架有很多,有重量级的Entity Framework,有 ...

  7. 在.NET Core程序中设置全局异常处理

    以前我们想设置全局异常处理只需要这样的代码: AppDomain currentDomain = AppDomain.CurrentDomain; currentDomain.UnhandledExc ...

  8. C#深入.NET平台的软件系统分层开发

    今天我们来讲讲分层开发,你从标题能不能简单的认识一下什么是分层呢? 不懂也没关系,接下来我来给你讲讲. 第一章 软件系统的分层开发 (1)其实分层模式可以这样定义:将解决方案中功能不同的模块分到不同的 ...

  9. Vim快捷键分类

      别用ESC了,用ctrl-[ 更快捷   一. 移动:    h,j,k,l: 左,下,上,右.    w: 下一个词的词首.    e:下一个词的词尾.    b:上一个词的词首.    < ...

  10. Clr编写Insert Triggr

    在CLR编写一个插入娄据的触发器. 这个触发器是当对表插入数据时,即时把刚才插入的数据显示出来: 可复制代码: public static void tri_RetrieveJustInsertedD ...