html代码块添加一键复制

标签可以定义代码块。这个标签可以使文本保留空格和换行符，并且字体使用等宽字体，符合通常的代码排版风格。但预格式化的文本无法被选中和复制。我们可以结合JavaScript语言，加入一键复制的功能。
首先，在需要添加一键复制功能的代码块前后，添加两个按钮a>
    和button>
    。其中，a>
    标签的作用是链接到JavaScript代码，button>
    标签的作用是显示按钮。
示例代码如下：
p>
    下面是一段HTML代码:/p>
    pre>
      code>
        html>
        head>
        title>
    这是标题/title>
        /head>
        body>
        h1>
    这是一个标题/h1>
        p>
    这是一段文本/p>
        /body>
        /html>
      /code>
    

标签的ID名称“html-code”。
接下来，添加一个基于clipboard.js库的JavaScript代码，实现点击按钮即可复制文本的功能。
script src="clipboard.min.js">
    /script>
    script>
      var clipboard = new Clipboard('.copy-btn');

  clipboard.on('success', function(e) {
        console.log(e);
  }
    );

  clipboard.on('error', function(e) {
        console.log(e);
  }
    );

  $("#js").click(function(){
          var text = $("#html-code")[0].innerText;
    //获取预格式文本内容      var input = document.createElement("textarea");
          input.value = text;
          document.body.appendChild(input);
          input.select();
          document.execCommand("copy");
          document.body.removeChild(input);
  }
    );
    /script>
    
这里我们调用了clipboard.min.js库，实现点击按钮即可复制文本的功能，同时，我们还给a>
    标签添加了点击事件，使得点击即可复制内容。
最后的效果如下图所示：
p>
    下面是一段HTML代码:/p>
    pre id="html-code">
      html>
      head>
      title>
    这是标题/title>
      /head>
      body>
      h1>
    这是一个标题/h1>
      p>
    这是一段文本/p>
      /body>
      /html>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！