我的网站上有一个功能,可以在单击电子邮件地址时复制它。 它可以在Chrome上完美运行,但文本不会在Safari上被选中。我还能做些什么来使其在Safari上正常工作吗?
在这里摆弄着各自的代码: https://jsfiddle.net/zsoltszilvai/odbxze9j/12/
function myFunction3() {
var copyText = document.getElementById("myInput3"),
range = document.getSelection().getRangeAt(0),
tooltip = document.getElementById("myTooltip3");
range.selectNode(copyText);
document.execCommand("Copy");
tooltip.innerHTML = "Copied";
}
function outFunc3() {
var tooltip = document.getElementById("myTooltip3");
tooltip.innerHTML = "Click to copy";
}
答案 0 :(得分:3)
<!DOCTYPE html>
<html>
<body>
<style media="screen">
.tooltip {
position: relative;
display: inline-block;
}
.tooltip:hover {
border-bottom: dotted 1px grey;
cursor: pointer;
}
.tooltip .tooltiptext {
visibility: hidden;
font-size: 18px;
width: 120px;
background-color: black;
color: white;
text-align: center;
border-radius: 2px;
padding: 8px;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
<html>
<body>
<h1>
Hello there
</h1>
<p>Write me an email to <span class="tooltip"><span onclick="myFunction3()" onmouseout="outFunc3()" id="myInput3">hello@johndoe.com</span> <span class="tooltiptext" id="myTooltip3">Click to copy</span> </span> or just contact me on social media.</p>
</body>
</html>
<script type="text/javascript">
function myFunction3() {
var copyText = document.getElementById("myInput3");
var range = document.createRange();
selectText('myInput3')
tooltip = document.getElementById("myTooltip3");
document.execCommand("Copy");
tooltip.innerHTML = "Copied";
}
function outFunc3() {
var tooltip = document.getElementById("myTooltip3");
tooltip.innerHTML = "Click to copy";
}
function selectText(element) {
var text = document.getElementById(element);
if (document.body.createTextRange) {
var range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
} else {
alert("none");
}
}
</script>
</body>
</html>
不同的浏览器可能有不同的内容选择方式,因此我在这里编写了selectText
方法,可以在Safari上正常工作。