时间戳

首页 > 解决方案 > Clipboard.js - 使用 IOS 时页面跳转到副本

javascript - Clipboard.js - 使用 IOS 时页面跳转到副本

问题描述

我正在使用clipboard.js，它在桌面上运行良好。但是，从 iPhone 上查看我的网站时，当您按下按钮单击复制时，页面会急剧地向上或向下滚动。

网站链接：symbolgrab.com

下面是我的代码。

// Tooltip
jQuery('button').tooltip({
  trigger: 'click',
  placement: 'bottom',
});

function setTooltip(btn, message) {
  jQuery(btn).tooltip('hide')
    .attr('data-original-title', message)
    .tooltip('show');
}

function hideTooltip(btn) {
  setTimeout(function() {
    jQuery(btn).tooltip('hide');
  }, 1000);
}

// Clipboard

var clipboard = new Clipboard('button');

clipboard.on('success', function(e) {
  setTooltip(e.trigger, 'Copied!');
  hideTooltip(e.trigger);
});

clipboard.on('error', function(e) {
  setTooltip(e.trigger, 'Unable to Copy');
  hideTooltip(e.trigger);
});
.btn {
	-moz-box-shadow: 0px 0px 8px 0px #000000;
	-webkit-box-shadow: 0px 0px 8px 0px #000000;
	box-shadow: 0px 0px 8px 0px #000000;
	background-color:#ffffff;
	-moz-border-radius:28px;
	-webkit-border-radius:28px;
	border-radius:8px;
	border:1px solid #000000;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-family:Times New Roman;
	font-size:38px;
	padding:5px 20px;
	text-decoration:none;
	width:90px;
	height:70px;
	margin-right:10px;
	margin-top:10px;
	position: relative;
}
.btn:hover {
	background-color:#f2f2f2;
}

.btn:active {
	position:relative;
	top:1px;
}
<button class="btn"  data-clipboard-action="copy" title="Text to Copy" alt="Text to Copy" data-clipboard-text="Text to Copy">Text to Copy</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

复制到剪贴板功能有效，唯一的问题是页面只是跳转。向下滚动页面越远，页面向下跳转的次数就越多。当您接近顶部时，页面会向上跳跃。不确定是什么原因造成的。任何帮助将不胜感激。谢谢！

标签： javascriptjqueryhtmlcss

解决方案

我为此工作了一整天，终于找到了一种将问题最小化的方法。

在您的 css 文件中：

textarea {
   position: fixed;
   top:50% !important;
   bottom:50% !important;
   height: 0.02px !important;
   background-color: black !important;
}

我将此添加到现有的

textarea {
   overflow: auto;
}

它仍然有一点点跳跃，但它要么几乎不引人注意，要么根本不明显，具体取决于您的元素布局。

如果我用display: none !important它完全隐藏它就不会复制任何文本，所以这对我来说是目前唯一合适的解决方案。

推荐阅读