小编Nic*_*mou的帖子

将url复制到剪贴板后如何显示成功消息?

将url复制到剪贴板后如何显示成功消息?

\n

将网址复制到剪贴板后,我尝试显示一条消息(即已复制!)。

\n

已经从 stackoverflow 和 codepen 中研究了这些1、2、3等等。

\n

\r\n
\r\n
function copy(){var e=document.getElementById("box");e.value=window.location.href,e.focus(),e.select(),document.getElementById("ctooltip").style.display="inline",document.execCommand("copy"),setTimeout(function(){document.getElementById("ctooltip").style.display="none"},2000)}
Run Code Online (Sandbox Code Playgroud)\r\n
.copybutton{background-color:transparent;border:0;outline:0;cursor:pointer;opacity:1;position:absolute}.btooltip{display:flex;align-items:center;margin-top:6px;min-height:30px}#ctooltip{display:none;font-size:20px;margin-left:0;padding:3px 8px;background:linear-gradient(45deg,#2e23ac 0,#ee71f9 100%);border-radius:24px;color:#fff;z-index:1;position:relative}.visuallyhidden{position:absolute;clip:rect(1px,1px,1px,1px)}
Run Code Online (Sandbox Code Playgroud)\r\n
<div class="btooltip"><button title="copy share link" type="submit" value="copy" onclick="copy();" class=copybutton><svg width="22" height="22" viewBox="0 0 20 20" version="1.1"><path stroke=white stroke-width=".4" fill="#000" d="M20,18.2V19H0v-1.5h16.4h2.1V5.2H20V18.2z M1.5,11.3V5.2H0v12.3h1.5V11.3z M9.2,12.8V0.5h1.5v12.3H9.2z M4.6,5.2h1.5v1.5H4.6V5.2z M6.2,3.6h1.5v1.5H6.2V3.6z M13.8,5.2h1.5v1.5h-1.5V5.2z M12.3,3.6h1.5v1.5h-1.5V3.6z M10.8,2.1h1.5v1.5h-1.5V2.1zM7.7,2.1h1.5v1.5H7.7V2.1z"></path></svg></button><span id="ctooltip">\xe2\x9c\x93</span></div><textarea class=visuallyhidden id="box"></textarea>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n

html javascript css clipboard

6
推荐指数
1
解决办法
2万
查看次数

标签 统计

clipboard ×1

css ×1

html ×1

javascript ×1