备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

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

2024-01-23 29
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 前端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
前端操作
前端.火鸡
目录
相关文章
cuicuicuic
|
1月前
|
移动开发 前端开发 Android开发
mPaaS 常见问题之移动开发平台 mpaas的H5 前端 Kylin 框架引入vant后包特别大如何解决
mPaaS（移动平台即服务，Mobile Platform as a Service）是阿里巴巴集团提供的一套移动开发解决方案，它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总，旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
cuicuicuic
43 0
阿珊和她的猫
|
3月前
|
前端开发 JavaScript UED
一看就懂的gulp操作指南：让前端工作变得更加轻松（二）
一看就懂的gulp操作指南：让前端工作变得更加轻松
阿珊和她的猫
28 0
阿珊和她的猫
|
3月前
|
缓存 前端开发 JavaScript
一看就懂的gulp操作指南：让前端工作变得更加轻松（一）
一看就懂的gulp操作指南：让前端工作变得更加轻松
阿珊和她的猫
48 0
阿珊和她的猫
|
3月前
|
JavaScript 前端开发 API
一看就懂的gulp操作指南：让前端工作变得更加轻松（三）
一看就懂的gulp操作指南：让前端工作变得更加轻松
阿珊和她的猫
81 0
阿甘兄
|
6月前
|
JavaScript 前端开发
前端基础 -JQuery之 对属性的操作
前端基础 -JQuery之 对属性的操作
阿甘兄
25 0
前方一片光明
|
8月前
|
前端开发
前端——关于字符串的操作整理
前端——关于字符串的操作整理
前方一片光明
66 0
田八
|
4月前
|
存储 前端开发 Java
【源码共读】在前端如何操作 Cookie
【源码共读】在前端如何操作 Cookie
田八
64 1
朱季谦
|
5月前
|
前端开发
前端笔记：React的form表单全部置空或者某个操作框置空的做法
在React框架前端开发中，经常会有弹出框的开发，涉及到弹出框，难免就会有表单。一般在关闭弹出框或者对表单联动时，往往都需要考虑对表单进行置空操作了。
朱季谦
47 0
阿甘兄
|
6月前
|
前端开发 JavaScript
前端基础 -JQuery之 对样式的操作
前端基础 -JQuery之 对样式的操作
阿甘兄
22 1
阿甘兄
|
6月前
|
前端开发 JavaScript
前端基础 - JavaScript之元素操作
前端基础 - JavaScript之元素操作
阿甘兄
31 0

热门文章

最新文章

  • 1
    构建高效响应式Web界面：现代前端框架的比较
  • 2
    Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
  • 3
    前端最常见的JS面试题大全
  • 4
    layui：从崛起到蜕变，前端框架的华丽篇章
  • 5
    使用机器学习优化前端用户体验
  • 6
    前端代码整洁与规范之CSS篇
  • 7
    探索前端开发中的新趋势：WebAssembly 技术应用与展望
  • 8
    如何使用浏览器调试前端代码？
  • 9
    常见的前端加密方式有哪些？运用场景有哪些？
  • 10
    uniapp上传图片 前端以及java后端代码实现
  • 1
    构建响应式Web界面：现代前端开发的最佳实践
    43
  • 2
    探索现代Web应用中的微前端架构
    29
  • 3
    构建高效前端项目：模块化与组件化策略
    32
  • 4
    前端发展趋势：WebAssembly、PWA 和响应式设计
    28
  • 5
    前端开发新趋势：Web3、区块链和虚拟现实
    38
  • 6
    架构的未来：微前端与微服务的融合
    63
  • 7
    前端模块规划
    14
  • 8
    调试前端时，在浏览器上修改参数并重新调用接口
    42
  • 9
    构建响应式Web界面：Flutter的跨界前端技术
    67
  • 10
    前端的CSS选择器
    23

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考