文章/答案/技术大牛

发布

社区首页 >问答首页 >Clipboard.js -使用IOS时页面跳转到复制

问Clipboard.js -使用IOS时页面跳转到复制
EN

Stack Overflow用户

提问于 2019-01-22 23:42:29

回答 1查看 199关注 0票数 2

我正在使用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"/>

复制到剪贴板功能有效，唯一的问题是页面只是跳跃。向下滚动越深，页面向下跳的越多。当你靠近顶部的时候，页面就会向上跳。不知道是什么引起的。任何帮助都将不胜感激。谢谢!

html

css

javascript

jquery

回答 1

Stack Overflow用户

发布于 2022-01-07 09:49:20

我花了一整天的时间研究这个问题，终于找到了一种将问题最小化的方法。

在css文件中：

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

我把这个添加到现有的

textarea {
   overflow: auto;
}

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54318049

复制

相似问题

问Clipboard.js -使用IOS时页面跳转到复制
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Clipboard.js -使用IOS时页面跳转到复制EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Clipboard.js -使用IOS时页面跳转到复制
EN