【完成】点击复制

leescott · 发表于 2021-3-17 12:17:02

本帖最后由 leescott 于 2021-3-20 18:05 编辑

做了个词典。
有一点点不满意，想做成点击复制，就是点击复制粗括号里面的内容，一次一个。
一个页面有一个的。或者索引页有八百个左右。
谢谢！

【归国留学生】 1997<br>
【男婚女嫁】 1997<br>

部件查询有个复制，他是在出来的文字上点击。脚本比较复杂，外行晕了。

mikeee · 发表于 2021-3-20 11:13:15

本帖最后由 mikeee 于 2021-3-20 11:31 编辑

<!DOCTYPE html>
<html>
<body>
<p>Click on the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.</p>
<div id="id1"> id1 text <button onclick="copyTextFromElement('id1')">Copy text</button> </div>
<div id="id2"> id2 text2 <button onclick="copyTextFromElement('id2')">Copy text2</button> </div>
<script>
function copyTextFromElement(elementID) {
let element = document.getElementById(elementID); //select the element
let elementText = element.textContent; //get the text content from the element
copyText(elementText); //use the copyText function below
}
function copyText(text) {
navigator.clipboard.writeText(text);
}
</script>
</body>
</html>

复制代码

参考 stackoverflow 的一个答案 https://stackoverflow.com/questi ... ipboard-not-working
大致可以试试做成这样。我记得mdx以页为单位，所以每一页里都得放这个<script>...</script> . <div>那个标签也可以是别的标签例如<span> 什么的

<button>...</button> 也可以放别的地方，只要里面的 id对上就可以了。

可以先放一个 text-click.html 文件里用chrome或firefox浏览器测试，打开devtools（页面上右键选Inspect或F12）选Console查看可能出现的错误信息，对脚本做相应的修改。GoldenDict里好像也可以Inspect Element，mdict不太清楚。

或把上面的码拷到 https://www.w3schools.com/howto/ ... w_js_copy_clipboard 修改测试效果。

leescott · 发表于 2021-3-20 14:21:02

本帖最后由 leescott 于 2021-3-20 14:29 编辑

谢谢回复！
我自己搞不定。麻烦看一看。
http://www.freejs.net/article_jquerywenzi_605.html

链接：https://pan.baidu.com/s/1ZEExDWouG_4hbAAgU4I2Ng
提取码：gw7y

leescott · 发表于 2021-3-20 18:05:14

终于搞定。电影大观。
自己看不懂，还是别处求助搞定的。外行需要交学费。
谢谢！

mikeee · 发表于 2021-3-20 20:16:30

本帖最后由 mikeee 于 2021-3-21 11:47 编辑

leescott 发表于 2021-3-20 14:21
谢谢回复！
我自己搞不定。麻烦看一看。
http://www.freejs.net/article_jquerywenzi_605.html

加一行就可以了

颜楷艺术特点
颜楷艺术特点
<h1 id='display' onClick='copyText(this)'>Text Sample</h1>
<br>
<script src="demo.js"></script>
</>

复制代码

假定 demo.js（原包里的js改名）放到和 mdx同一个目录。txt文件必须 utf-8格式，折腾我很久。

实测

mikeee · 发表于 2021-3-20 21:50:30

本帖最后由 mikeee 于 2021-3-21 09:58 编辑

颜楷艺术特点
颜楷艺术特点
<h1 id='display' onClick='copyText(this)'>Text Sample</h1>
<br>
<script>function copyText(element){navigator.clipboard.writeText(element.textContent)}</script>
</>

复制代码

Godlendict浏览器引擎够新的话，加这句<script>...</script>就够了，无需外加 demo.js! 实测Chrome里可行，Goldendict暂时好像还不行，可能过一阵Goldendict更新了浏览器引擎就可以了——立此存照 :)。

mikeee · 发表于 2021-3-21 09:46:48

本帖最后由 mikeee 于 2021-3-21 09:56 编辑

颜楷艺术特点
颜楷艺术特点
<h1 class="btn" data-clipboard-action="copy" data-clipboard-target="h1">Text Sample</h1>
<br>
<script src="clipboard.min.js"></script>
<script>var clipboard = new ClipboardJS('.btn');</script>
</>

复制代码

这个基于 clipboard.js 包，支持比较旧的浏览器。实测在 Goldendict里可行。做法：上面的码存为 demo.txt, 下载 clipboard.js https://github.com/zenorocha/clipboard.js/archive/master.zip ，解压里面的 clipboard.min.js 文件放到和 demo.txt (demo.mdx) 同一个目录里。再用 MdxBuilder 打包成 mdx 就可以了。

感谢各位大佬送分。正好这一阵在看和这个有关的东西，算是练习一下。

[求助] 【完成】点击复制

评分

评分

评分

评分