AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

前端H5怎么简单的实现复制text内容的操作

2024-01-23 75
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 前端H5怎么简单的实现复制text内容的操作

首先说明一下写这个的原因，现在不管是什么类型的网站，不管你访问的是什么类型的网址，进去以后你想要保存一些东西很简单，直接右键选择复制就可以了，这个是Windows自带的功能（快捷键 ctrl+c/ctrl+v，不做赘述），那么windows提供了那么好的功能，我们为什么还要做一个复制的操作呢？很简单有的时候访问网站的人不会这个操作，但是认识字，你可以给他提供一个复制的按钮，然后复制text输入的内容就可以了，这个他是会操作的，ok废话不说，简单的说明一些怎么实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>target-input</title>
</head>
<body>
    <!-- 画一个简单的text框何一个简单的按钮测试效果 -->
    <input id="foo" type="text" value="hello">
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>
    <script src="js/clipboard.min.js"></script>
    <script>
    var clipboard = new Clipboard('.btn');
    clipboard.on('success', function(e) {
        console.log("ok");
    });
    clipboard.on('error', function(e) {
        console.log("false");
    });
    </script>
</body>
</html>
这里是用到的js（clipboard.min.js），可以直接复制或者是自己写一个js也可以（也就是不管是外部引用还是直接引用都是没问题的）
!
function(t) {
  if ("object" == typeof exports && "undefined" != typeof module) module.exports = t();
  else if ("function" == typeof define && define.amd) define([], t);
  else {
    var e;
    e = "undefined" != typeof window ? window: "undefined" != typeof global ? global: "undefined" != typeof self ? self: this,
    e.Clipboard = t()
  }
} (function() {
  var t, e, n;
  return function t(e, n, o) {
    function i(a, c) {
      if (!n[a]) {
        if (!e[a]) {
          var l = "function" == typeof require && require;
          if (!c && l) return l(a, !0);
          if (r) return r(a, !0);
          var s = new Error("Cannot find module '" + a + "'");
          throw s.code = "MODULE_NOT_FOUND",
          s
        }
        var u = n[a] = {
          exports: {}
        };
        e[a][0].call(u.exports,
        function(t) {
          var n = e[a][1][t];
          return i(n || t)
        },
        u, u.exports, t, e, n, o)
      }
      return n[a].exports
    }
    for (var r = "function" == typeof require && require,
    a = 0; a < o.length; a++) i(o[a]);
    return i
  } ({
    1 : [function(t, e, n) {
      function o(t, e) {
        for (; t && t.nodeType !== i;) {
          if ("function" == typeof t.matches && t.matches(e)) return t;
          t = t.parentNode
        }
      }
      var i = 9;
      if ("undefined" != typeof Element && !Element.prototype.matches) {
        var r = Element.prototype;
        r.matches = r.matchesSelector || r.mozMatchesSelector || r.msMatchesSelector || r.oMatchesSelector || r.webkitMatchesSelector
      }
      e.exports = o
    },
    {}],
    2 : [function(t, e, n) {
      function o(t, e, n, o, r) {
        var a = i.apply(this, arguments);
        return t.addEventListener(n, a, r),
        {
          destroy: function() {
            t.removeEventListener(n, a, r)
          }
        }
      }
      function i(t, e, n, o) {
        return function(n) {
          n.delegateTarget = r(n.target, e),
          n.delegateTarget && o.call(t, n)
        }
      }
      var r = t("./closest");
      e.exports = o
    },
    {
      "./closest": 1
    }],
    3 : [function(t, e, n) {
      n.node = function(t) {
        return void 0 !== t && t instanceof HTMLElement && 1 === t.nodeType
      },
      n.nodeList = function(t) {
        var e = Object.prototype.toString.call(t);
        return void 0 !== t && ("[object NodeList]" === e || "[object HTMLCollection]" === e) && "length" in t && (0 === t.length || n.node(t[0]))
      },
      n.string = function(t) {
        return "string" == typeof t || t instanceof String
      },
      n.fn = function(t) {
        return "[object Function]" === Object.prototype.toString.call(t)
      }
    },
    {}],
    4 : [function(t, e, n) {
      function o(t, e, n) {
        if (!t && !e && !n) throw new Error("Missing required arguments");
        if (!c.string(e)) throw new TypeError("Second argument must be a String");
        if (!c.fn(n)) throw new TypeError("Third argument must be a Function");
        if (c.node(t)) return i(t, e, n);
        if (c.nodeList(t)) return r(t, e, n);
        if (c.string(t)) return a(t, e, n);
        throw new TypeError("First argument must be a String, HTMLElement, HTMLCollection, or NodeList")
      }
      function i(t, e, n) {
        return t.addEventListener(e, n),
        {
          destroy: function() {
            t.removeEventListener(e, n)
          }
        }
      }
      function r(t, e, n) {
        return Array.prototype.forEach.call(t,
        function(t) {
          t.addEventListener(e, n)
        }),
        {
          destroy: function() {
            Array.prototype.forEach.call(t,
            function(t) {
              t.removeEventListener(e, n)
            })
          }
        }
      }
      function a(t, e, n) {
        return l(document.body, t, e, n)
      }
      var c = t("./is"),
      l = t("delegate");
      e.exports = o
    },
    {
      "./is": 3,
      delegate: 2
    }],
    5 : [function(t, e, n) {
      function o(t) {
        var e;
        if ("SELECT" === t.nodeName) t.focus(),
        e = t.value;
        else if ("INPUT" === t.nodeName || "TEXTAREA" === t.nodeName) {
          var n = t.hasAttribute("readonly");
          n || t.setAttribute("readonly", ""),
          t.select(),
          t.setSelectionRange(0, t.value.length),
          n || t.removeAttribute("readonly"),
          e = t.value
        } else {
          t.hasAttribute("contenteditable") && t.focus();
          var o = window.getSelection(),
          i = document.createRange();
          i.selectNodeContents(t),
          o.removeAllRanges(),
          o.addRange(i),
          e = o.toString()
        }
        return e
      }
      e.exports = o
    },
    {}],
    6 : [function(t, e, n) {
      function o() {}
      o.prototype = {
        on: function(t, e, n) {
          var o = this.e || (this.e = {});
          return (o[t] || (o[t] = [])).push({
            fn: e,
            ctx: n
          }),
          this
        },
        once: function(t, e, n) {
          function o() {
            i.off(t, o),
            e.apply(n, arguments)
          }
          var i = this;
          return o._ = e,
          this.on(t, o, n)
        },
        emit: function(t) {
          var e = [].slice.call(arguments, 1),
          n = ((this.e || (this.e = {}))[t] || []).slice(),
          o = 0,
          i = n.length;
          for (o; o < i; o++) n[o].fn.apply(n[o].ctx, e);
          return this
        },
        off: function(t, e) {
          var n = this.e || (this.e = {}),
          o = n[t],
          i = [];
          if (o && e) for (var r = 0,
          a = o.length; r < a; r++) o[r].fn !== e && o[r].fn._ !== e && i.push(o[r]);
          return i.length ? n[t] = i: delete n[t],
          this
        }
      },
      e.exports = o
    },
    {}],
    7 : [function(e, n, o) { !
      function(i, r) {
        if ("function" == typeof t && t.amd) t(["module", "select"], r);
        else if (void 0 !== o) r(n, e("select"));
        else {
          var a = {
            exports: {}
          };
          r(a, i.select),
          i.clipboardAction = a.exports
        }
      } (this,
      function(t, e) {
        "use strict";
        function n(t) {
          return t && t.__esModule ? t: {
          default:
            t
          }
        }
        function o(t, e) {
          if (! (t instanceof e)) throw new TypeError("Cannot call a class as a function")
        }
        var i = n(e),
        r = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ?
        function(t) {
          return typeof t
        }: function(t) {
          return t && "function" == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? "symbol": typeof t
        },
        a = function() {
          function t(t, e) {
            for (var n = 0; n < e.length; n++) {
              var o = e[n];
              o.enumerable = o.enumerable || !1,
              o.configurable = !0,
              "value" in o && (o.writable = !0),
              Object.defineProperty(t, o.key, o)
            }
          }
          return function(e, n, o) {
            return n && t(e.prototype, n),
            o && t(e, o),
            e
          }
        } (),
        c = function() {
          function t(e) {
            o(this, t),
            this.resolveOptions(e),
            this.initSelection()
          }
          return a(t, [{
            key: "resolveOptions",
            value: function t() {
              var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
              this.action = e.action,
              this.container = e.container,
              this.emitter = e.emitter,
              this.target = e.target,
              this.text = e.text,
              this.trigger = e.trigger,
              this.selectedText = ""
            }
          },
          {
            key: "initSelection",
            value: function t() {
              this.text ? this.selectFake() : this.target && this.selectTarget()
            }
          },
          {
            key: "selectFake",
            value: function t() {
              var e = this,
              n = "rtl" == document.documentElement.getAttribute("dir");
              this.removeFake(),
              this.fakeHandlerCallback = function() {
                return e.removeFake()
              },
              this.fakeHandler = this.container.addEventListener("click", this.fakeHandlerCallback) || !0,
              this.fakeElem = document.createElement("textarea"),
              this.fakeElem.style.fontSize = "12pt",
              this.fakeElem.style.border = "0",
              this.fakeElem.style.padding = "0",
              this.fakeElem.style.margin = "0",
              this.fakeElem.style.position = "absolute",
              this.fakeElem.style[n ? "right": "left"] = "-9999px";
              var o = window.pageYOffset || document.documentElement.scrollTop;
              this.fakeElem.style.top = o + "px",
              this.fakeElem.setAttribute("readonly", ""),
              this.fakeElem.value = this.text,
              this.container.appendChild(this.fakeElem),
              this.selectedText = (0, i.
            default)(this.fakeElem),
              this.copyText()
            }
          },
          {
            key: "removeFake",
            value: function t() {
              this.fakeHandler && (this.container.removeEventListener("click", this.fakeHandlerCallback), this.fakeHandler = null, this.fakeHandlerCallback = null),
              this.fakeElem && (this.container.removeChild(this.fakeElem), this.fakeElem = null)
            }
          },
          {
            key: "selectTarget",
            value: function t() {
              this.selectedText = (0, i.
            default)(this.target),
              this.copyText()
            }
          },
          {
            key: "copyText",
            value: function t() {
              var e = void 0;
              try {
                e = document.execCommand(this.action)
              } catch(t) {
                e = !1
              }
              this.handleResult(e)
            }
          },
          {
            key: "handleResult",
            value: function t(e) {
              this.emitter.emit(e ? "success": "error", {
                action: this.action,
                text: this.selectedText,
                trigger: this.trigger,
                clearSelection: this.clearSelection.bind(this)
              })
            }
          },
          {
            key: "clearSelection",
            value: function t() {
              this.trigger && this.trigger.focus(),
              window.getSelection().removeAllRanges()
            }
          },
          {
            key: "destroy",
            value: function t() {
              this.removeFake()
            }
          },
          {
            key: "action",
            set: function t() {
              var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : "copy";
              if (this._action = e, "copy" !== this._action && "cut" !== this._action) throw new Error('Invalid "action" value, use either "copy" or "cut"')
            },
            get: function t() {
              return this._action
            }
          },
          {
            key: "target",
            set: function t(e) {
              if (void 0 !== e) {
                if (!e || "object" !== (void 0 === e ? "undefined": r(e)) || 1 !== e.nodeType) throw new Error('Invalid "target" value, use a valid Element');
                if ("copy" === this.action && e.hasAttribute("disabled")) throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');
                if ("cut" === this.action && (e.hasAttribute("readonly") || e.hasAttribute("disabled"))) throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');
                this._target = e
              }
            },
            get: function t() {
              return this._target
            }
          }]),
          t
        } ();
        t.exports = c
      })
    },
    {
      select: 5
    }],
    8 : [function(e, n, o) { !
      function(i, r) {
        if ("function" == typeof t && t.amd) t(["module", "./clipboard-action", "tiny-emitter", "good-listener"], r);
        else if (void 0 !== o) r(n, e("./clipboard-action"), e("tiny-emitter"), e("good-listener"));
        else {
          var a = {
            exports: {}
          };
          r(a, i.clipboardAction, i.tinyEmitter, i.goodListener),
          i.clipboard = a.exports
        }
      } (this,
      function(t, e, n, o) {
        "use strict";
        function i(t) {
          return t && t.__esModule ? t: {
          default:
            t
          }
        }
        function r(t, e) {
          if (! (t instanceof e)) throw new TypeError("Cannot call a class as a function")
        }
        function a(t, e) {
          if (!t) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
          return ! e || "object" != typeof e && "function" != typeof e ? t: e
        }
        function c(t, e) {
          if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function, not " + typeof e);
          t.prototype = Object.create(e && e.prototype, {
            constructor: {
              value: t,
              enumerable: !1,
              writable: !0,
              configurable: !0
            }
          }),
          e && (Object.setPrototypeOf ? Object.setPrototypeOf(t, e) : t.__proto__ = e)
        }
        function l(t, e) {
          var n = "data-clipboard-" + t;
          if (e.hasAttribute(n)) return e.getAttribute(n)
        }
        var s = i(e),
        u = i(n),
        f = i(o),
        d = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ?
        function(t) {
          return typeof t
        }: function(t) {
          return t && "function" == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? "symbol": typeof t
        },
        h = function() {
          function t(t, e) {
            for (var n = 0; n < e.length; n++) {
              var o = e[n];
              o.enumerable = o.enumerable || !1,
              o.configurable = !0,
              "value" in o && (o.writable = !0),
              Object.defineProperty(t, o.key, o)
            }
          }
          return function(e, n, o) {
            return n && t(e.prototype, n),
            o && t(e, o),
            e
          }
        } (),
        p = function(t) {
          function e(t, n) {
            r(this, e);
            var o = a(this, (e.__proto__ || Object.getPrototypeOf(e)).call(this));
            return o.resolveOptions(n),
            o.listenClick(t),
            o
          }
          return c(e, t),
          h(e, [{
            key: "resolveOptions",
            value: function t() {
              var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
              this.action = "function" == typeof e.action ? e.action: this.defaultAction,
              this.target = "function" == typeof e.target ? e.target: this.defaultTarget,
              this.text = "function" == typeof e.text ? e.text: this.defaultText,
              this.container = "object" === d(e.container) ? e.container: document.body
            }
          },
          {
            key: "listenClick",
            value: function t(e) {
              var n = this;
              this.listener = (0, f.
            default)(e, "click",
              function(t) {
                return n.onClick(t)
              })
            }
          },
          {
            key: "onClick",
            value: function t(e) {
              var n = e.delegateTarget || e.currentTarget;
              this.clipboardAction && (this.clipboardAction = null),
              this.clipboardAction = new s.
            default({
                action:
                this.action(n),
                target: this.target(n),
                text: this.text(n),
                container: this.container,
                trigger: n,
                emitter: this
              })
            }
          },
          {
            key: "defaultAction",
            value: function t(e) {
              return l("action", e)
            }
          },
          {
            key: "defaultTarget",
            value: function t(e) {
              var n = l("target", e);
              if (n) return document.querySelector(n)
            }
          },
          {
            key: "defaultText",
            value: function t(e) {
              return l("text", e)
            }
          },
          {
            key: "destroy",
            value: function t() {
              this.listener.destroy(),
              this.clipboardAction && (this.clipboardAction.destroy(), this.clipboardAction = null)
            }
          }], [{
            key: "isSupported",
            value: function t() {
              var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : ["copy", "cut"],
              n = "string" == typeof e ? [e] : e,
              o = !!document.queryCommandSupported;
              return n.forEach(function(t) {
                o = o && !!document.queryCommandSupported(t)
              }),
              o
            }
          }]),
          e
        } (u.
      default);
        t.exports = p
      })
    },
    {
      "./clipboard-action": 7,
      "good-listener": 4,
      "tiny-emitter": 6
    }]
  },
  {},
  [8])(8)
});

效果图

image.png

文章标签：
前端开发
移动开发
Windows
关键词：
前端h5
前端操作
前端text
前端.火鸡
目录
相关文章
真的很搞笑
|
8月前
|
移动开发 前端开发 Android开发
mPaaS 常见问题之移动开发平台 mpaas的H5 前端 Kylin 框架引入vant后包特别大如何解决
mPaaS（移动平台即服务，Mobile Platform as a Service）是阿里巴巴集团提供的一套移动开发解决方案，它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总，旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
真的很搞笑
274 0
阿珊和她的猫
|
8月前
|
前端开发 JavaScript UED
一看就懂的gulp操作指南：让前端工作变得更加轻松（二）
一看就懂的gulp操作指南：让前端工作变得更加轻松
阿珊和她的猫
172 0
阿珊和她的猫
|
8月前
|
缓存 前端开发 JavaScript
一看就懂的gulp操作指南：让前端工作变得更加轻松（一）
一看就懂的gulp操作指南：让前端工作变得更加轻松
阿珊和她的猫
1917 0
阿珊和她的猫
|
8月前
|
JavaScript 前端开发 API
一看就懂的gulp操作指南：让前端工作变得更加轻松（三）
一看就懂的gulp操作指南：让前端工作变得更加轻松
阿珊和她的猫
365 0
雨溪-yuxi
|
2月前
|
移动开发 前端开发 JavaScript
前端H5使用canvas画爱心以及笑脸
本文介绍了HTML5中的canvas元素及其基本用法，通过JavaScript在canvas上绘制图形。首先简述了canvas的功能，接着详细展示了如何使用`bezierCurveTo`方法绘制爱心和`arc`方法绘制笑脸，并附有示例代码及效果说明。最后总结了canvas在网页图形绘制上的应用潜力。
雨溪-yuxi
73 2
阿甘兄
|
JavaScript 前端开发
前端基础 -JQuery之val，text，html
前端基础 -JQuery之val，text，html
阿甘兄
90 1
花开富贵111
|
7月前
|
前端开发 计算机视觉
视觉智能开放平台操作报错合集之人脸对比1:1，采用web前端直接调用，使用了base64处理图片，提示http错误码414，该如何处理
在使用视觉智能开放平台时，可能会遇到各种错误和问题。虽然具体的错误代码和消息会因平台而异，但以下是一些常见错误类型及其可能的原因和解决策略的概述，包括但不限于：1. 认证错误、2. 请求参数错误、3. 资源超限、4. 图像质量问题、5. 服务不可用、6. 模型不支持的场景、7. 网络连接问题，这有助于快速定位和解决问题。
花开富贵111
88 0
花开富贵111
|
7月前
|
前端开发 程序员 API
视觉智能开放平台产品使用合集之web前端拉起人脸识别该如何操作
视觉智能开放平台是指提供一系列基于视觉识别技术的API和服务的平台，这些服务通常包括图像识别、人脸识别、物体检测、文字识别、场景理解等。企业或开发者可以通过调用这些API，快速将视觉智能功能集成到自己的应用或服务中，而无需从零开始研发相关算法和技术。以下是一些常见的视觉智能开放平台产品及其应用场景的概览。
花开富贵111
43 0
爱吃糖的范同学
|
8月前
|
存储 缓存 JavaScript
【Web 前端】JS哪些操作会造成内存泄露？
【4月更文挑战第22天】【Web 前端】JS哪些操作会造成内存泄露？
爱吃糖的范同学
151 1
阿甘兄
|
JavaScript 前端开发
前端基础 -JQuery之 对属性的操作
前端基础 -JQuery之 对属性的操作
阿甘兄
54 0

热门文章

最新文章

  • 1
    DeepSeek Artifacts：在线实时预览的前端 AI 编程工具，基于DeepSeek V3快速生成React App
  • 2
    圈子社交app前端+后端源码，uniapp社交兴趣圈子开发，框架php圈子小程序安装搭建
  • 3
    2025年前端局势分析，我该不该转行？
  • 4
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 5
    前端必须掌握的设计模式——模板模式
  • 6
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
  • 7
    2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
  • 8
    前端必须掌握的设计模式——策略模式
  • 9
    前端 CSS 优化：提升页面美学与性能
  • 10
    《前端技术基础》第01章 HTML基础【合集】
  • 1
    前端必备的浏览器调试技巧
    169
  • 2
    前端架构师需要具备什么能力以及代码能力？
    242
  • 3
    java中本地路径写成接口传输到前端
    62
  • 4
    前端框架与库 - jQuery基础与DOM操作
    50
  • 5
    前端如何学习Node.js及Node.js的主要用途
    118
  • 6
    前端框架与库 - Angular模块与依赖注入
    82
  • 7
    前端工程化：Webpack配置全攻略
    69
  • 8
    前端框架与库 - Angular基础：组件、模板、服务
    82
  • 9
    前端实现打字机的效果 -- typed库的使用
    222
  • 10
    手把手教你写一个简易的微前端框架​
    48

    • 相关课程

    更多
  • 网站性能前端监控课程
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
    • 下一篇
    DataWorks售前咨询