- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的网站上有一项功能,可以在点击时复制电子邮件地址。它在 Chrome 上完美运行,但在 Safari 上无法选择文本。我可以做些什么来让它在 Safari 上也能正常工作吗?
这是一个带有相应代码的 fiddle : 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";
}
最佳答案
<!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上可以正常工作。
关于javascript - Range = document.getSelection().getRangeAt(0) 在 Safari 上不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58669383/
今天有小伙伴给我留言问到,try{...}catch(){...}是什么意思?它用来干什么? 简单的说 他们是用来捕获异常的 下面我们通过一个例子来详细讲解下
我正在努力提高网站的可访问性,但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接,因
说现在是 6 点,我有一个 Timer 并在 10 点安排了一个 TimerTask。之后,System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我就废话不多说了,大家还是直接看代码吧~ ? 1
Maven系列1 1.什么是Maven? Maven是一个项目管理工具,它包含了一个对象模型。一组标准集合,一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。 核心功能 Mav
我是一名优秀的程序员,十分优秀!