专栏首页农历七月廿一前端H5怎么简单的实现复制text内容的操作

前端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)
});

效果图

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jQuery调取微信摄像头代码记录

    我们在写不管是小程序还是微信公众号的时候,调取微信的摄像头的接口都是避免不了的,那么调取微信的摄像头的接口还是需要注意一些问题的,不然可能调取不成功,下面我简单...

    何处锦绣不灰堆
  • 智能搜索框实现思路--源码和流程图详解

    我们在浏览各大网站的时候,包括百度、淘宝、京东、雅虎等等网站,当我们输入一个单词或者文字的时候,下面会有一行行待选项供我们选择,很多的公司在做网站的时候也会考虑...

    何处锦绣不灰堆
  • vue踩坑记-项目对axios进行封装

    我们在做vue项目的时候,经常会遇到一个问题就是我们的请求需要加请求头,或者还不是一个请求头的情况,那么其实我们可以使用比较原始的办法,直接在我们写的时候就直接...

    何处锦绣不灰堆
  • 大佬日常必备的JS工具函数大全

    前面我们分享过一篇:前端常用的60多种JavaScript工具方法,很多人觉得有用,今天再分享一篇类似的东西,如果文章和笔记能带您一丝帮助或者启发,请不要吝啬你...

    前端开发博客
  • Javascript 笔记

    JavaScript表单验证电话号码,判断一个输入量是否为电话号码,通过正则表达式实现。 //检查电话号码 function isTel(str){      ...

    Hongten
  • JavaScript 技术篇-js里直接引用jQuery的方法。不依赖html的引用

    常规方法,依赖html里加参数: 上面的是直接下载到本地的jquery文件。 下面是在线的,直接引用百度,阿里等等提供的jquery网址。

    小蓝枣
  • 微信小游戏1

    游戏内容介绍 游戏作品内容准确介绍〔包括但不限于:游戏背景、扮演角色、游戏角色(NPC)、场景、主要情节、玩法、功能(系统)、主要特点、游戏使用方法等〕,须逐...

    达达前端
  • jquery 实现点击图片居住放大缩小

    wfaceboss
  • 读书笔记-JavaScript面向对象编程(一)

    前前后后大概花了两周的时间,终于把这本书大致看完了,对之前javascript高级程序设计中模糊不清的概念,有了一些新的看法和角度,整体上来说,本书还是一本比较...

    小古哥
  • 「持续更新中」JavaScript 设计模式精简代码实现

    逆葵

扫码关注云+社区

领取腾讯云代金券