为网站代码块pre标签增加一个复制代码按钮代码

参考其他比较专业的博客系统,都在代码块上有一个复制代码的按钮。用来快速复制整个代码块的代码。于是我也想给我的博客增加一个这个功能。

注:chrome测试通过。其他浏览器未进行测试。

实现思路:

1、在页面加载完成之后,使用js给每个pre标签增加一个按钮“复制代码”

2、给按钮增加点击事件,点击事件的功能就是复制代码块的内容

实现代码:

css部分,btn-pre-copy是pre标签中使用js增加的“复制代码”按钮。css的作用是让他显示在pre标签的右上角。这里要注意pre标签和按钮中position属性

.content pre{
    position: relative;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
}
pre .btn-pre-copy{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    color: hsla(0,0%,54.9%,.8);
    transition: color .1s;
}

js部分,js部分主要是给pre标签增加按钮和实现拷贝部分,我这里拷贝部分的实现是先实例化一个临时的节点textarea,然后吧pre的内容设置进这个临时节点,然后选中内容进行复制,最后销毁这个节点。具体参考代码。js部分有依赖于jquery

$(function(){
    //给每一串代码元素增加复制代码节点
    let preList = $(".content pre");
    for (let pre of preList) {
        //给每个代码块增加上“复制代码”按钮
        let btn = $("<span class=\"btn-pre-copy\" onclick='preCopy(this)'>复制代码</span>");
        btn.prependTo(pre);
    }
});

/**
    * 执行复制代码操作
    * @param obj
    */
function preCopy(obj) {
    //执行复制
    let btn = $(obj);
    let pre = btn.parent();
    //为了实现复制功能。新增一个临时的textarea节点。使用他来复制内容
    let temp = $("<textarea></textarea>");
    //避免复制内容时把按钮文字也复制进去。先临时置空
    btn.text("");
    temp.text(pre.text());
    temp.appendTo(pre);
    temp.select();
    document.execCommand("Copy");
    temp.remove();
    //修改按钮名
    btn.text("复制成功");
    //一定时间后吧按钮名改回来
    setTimeout(()=> {
        btn.text("复制代码");
    },1500);
}

这里在gitee上做了一个简单的demo。demo示例:

在线测试:http://demo.jb51.net/js/2021/code_copy/

到此这篇关于为网站代码块pre标签增加一个复制代码按钮代码的文章就介绍到这了,更多相关代码高亮增加复制代码功能内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-11-20

java代码块之简易qq登录界面及按钮颜色设置代码

本文主要分享了关于简洁版qq登录界面及按钮颜色设置的相关代码,供参考. java代码块 公共包(初始化窗口位置) package util; import java.awt.Dimension; import java.awt.Toolkit; import javax.swing.JFrame; //图形化界面的工具类 public class FrameUtil { //设置窗体出现在中间位置 public static void initFrame(JFrame frame,int wid

举例说明Java中代码块的执行顺序

前言     今天在看Android ContentProvider实现的时候,突然想到了Java类在new的过程中,静态域.静态块.非静态域.非静态块.构造函数的执行顺序问题.其实这是一个很经典的问题,非常考察对Java基础知识的掌握程度.很多面试过程中相信也有这样的问题,趁着周末有时间复习一下. 结论     这里先把整理好的结论抛给大家,然后我在写个程序来验证我们的结论.在Java类被new的过程中,执行顺序如下: 实现自身的静态属性和静态代码块.(根据代码出现的顺序决定谁先执行) 实现自

深入浅析Java中普通代码块、构造代码块与静态代码块

//执行顺序:(优先级从高到低.) 静态代码块>mian方法>构造代码块>构造方法. 其中静态代码块只执行一次.构造代码块在每次创建对象是都会执行. 1.普通代码块 public static void main(String[] args) { /*普通代码块: *直接定义在在方法或语句中出现"{普通代码的执行语句}"的就称为普通代码块. *普通代码块执行顺序由他们在代码中出现的次序决定--"先出现先执行" * */ { System.out.p

去除HTML代码中所有标签的两种方法

去除HTML代码中所有标签 复制代码 代码如下: <% '****************************** '函数:RemoveHTML_A(strText) '参数:strText,待处理的字符串 '作者:阿里西西 '日期:2007/7/12 '描述:去除HTML代码中所有标签 '示例:<%=RemoveHTML_A("<b>欢迎光临阿里西西</b>")%> '****************************** Func

Java中的static静态代码块的使用详解

一.与静态方法的比较 一般情况下,如果有些代码必须在项目启动的时候就执行的时候,需要使用静态代码块,这种代码是主动执行的;需要在项目启动的时候就初始化,在不创建对象的情况下,其他程序来调用的时候,需要使用静态方法,静态方法在类加载的时候 就已经加载 可以用类名直接调用 比如main方法就必须是静态的 这是程序入口.两者的区别就是:静态代码块是自动执行的; 静态方法是被调用的时候才执行的. 二.静态方法注意事项 使用类的静态方法时,注意: a.在静态方法里只能直接调用同类中其他的静态成员(包括变量

Android代码块执行顺序分析总结

本文介绍了Android代码块执行顺序分析总结,分享给大家,具体如下: 子类.父类变量,代码块,以及构造方法的加载顺序,是我们在程序开发中时不时遇到的一个问题,也是比较容易混淆的. 基础准备: 变量: 成员变量(叫类变量.实例变量)和局部变量 方法: 成员方法和构造方法 代码块:普通代码块.构造代码块.静态代码块.同步代码块 测试的父类: public class ParentClass { public static String name = "爸爸"; public int ag

Python功能点实现:函数级/代码块级计时器

工程中我们常常需要对某一个函数或者一块代码计时,从而监测系统关键位置的性能.计时方法是在代码块前后分别记录当前系统时间,然后两者相减得到代码块的耗时.最简单原始的实现类似: from datetime import datetime start = datetime.now() # some code you want to measure end = datetime.now() print("Processing time for {} is: {} seconds".format

Java静态代码块加载驱动代码实例

Demo1.funx(); String s=Demo1.string; 静态代码块 会在new一个该类对象时调用 或者调用该类的静态方法,静态成员变量时调用 总之在类加载器将该类加载到内存中时 (无论是通过哪种方式) 都会调用静态代码块 静态成员变量 静态代码块永远只被初始化一次 无论new多少个对象 加载类时 初始化顺序 静态成员->静态代码块 ->变量,初始化块->构造函数 由于静态代码块永远只被加载一次的特性 常被用来加载配置文件 等初始化操作(单例模式) 例子 static {

Java 中普通代码块,构造代码块,静态代码块区别及代码示例

Java中普通代码块,构造代码块,静态代码块区别及代码示例 //执行顺序:(优先级从高到低.)静态代码块>mian方法>构造代码块>构造方法. 其中静态代码块只执行一次.构造代码块在每次创建对象是都会执行. 1 普通代码块 //普通代码块:在方法或语句中出现的{}就称为普通代码块.普通代码块和一般的语句执行顺序由他们在代码中出现的次序决定--"先出现先执行" public class CodeBlock01{ public static void main(Strin

详解java中的四种代码块

在java中用{}括起来的称为代码块,代码块可分为以下四种: 一.简介 1.普通代码块: 类中方法的方法体 2.构造代码块: 构造块会在创建对象时被调用,每次创建时都会被调用,优先于类构造函数执行. 3.静态代码块: 用static{}包裹起来的代码片段,只会执行一次.静态代码块优先于构造块执行. 4.同步代码块: 使用synchronized(){}包裹起来的代码块,在多线程环境下,对共享数据的读写操作是需要互斥进行的,否则会导致数据的不一致性.同步代码块需要写在方法中. 二.静态代码块和构造