【完成】点击复制

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>
; T: n6 z9 X# f M" m2 l
<html>" y5 C8 t$ Z! R, k+ e7 W% | a2 ~
<body>% J* g# d6 _$ }/ D0 U
/ c% _7 Q) ~/ b6 }" t% D5 L
<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>
* ^; s6 k5 D/ m
, a6 F) p( U$ e* j
<div id="id1"> id1 text <button onclick="copyTextFromElement('id1')">Copy text</button> </div>
7 j/ c! b' |4 S k( H2 _
5 G3 V; y) V/ T3 U" Z/ F: o' h0 T; w
<div id="id2"> id2 text2 <button onclick="copyTextFromElement('id2')">Copy text2</button> </div> " X7 S1 d5 P2 Y1 j ?
, Y- |5 ^0 }) C. B6 K- Q% S3 L
0 x6 O8 U. Y' ^7 Z+ O! ^% y1 P
<script>6 K, U# | f$ X6 J7 N( g7 `
function copyTextFromElement(elementID) {
/ h9 g9 j9 ?6 k0 C Z: Z
let element = document.getElementById(elementID); //select the element
8 E6 y& @. w! z
let elementText = element.textContent; //get the text content from the element/ n" y' B! d+ h: a- G A+ H
copyText(elementText); //use the copyText function below2 b3 }' k% _* V; u. A% @3 X
}
5 F6 G: H1 a* b A
function copyText(text) {
3 \) i2 K, }; ]; [: R# h' k# b
navigator.clipboard.writeText(text);1 k0 T+ W, b2 z, e1 O& G
}/ u' O1 @( o0 R5 S% ^+ I" i* |
</script>
! N0 [8 C% ?7 Y" V' y( \
# K3 b( J/ o2 ^. T L. T
</body>
, Q/ e5 k* P. M1 R: [) P
</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
0 L& Q1 ?+ d( D/ y: s谢谢回复！1 n& r, a' R, T
我自己搞不定。麻烦看一看。
3 k: v+ K4 [" G4 Y& |1 m Shttp://www.freejs.net/article_jquerywenzi_605.html

加一行就可以了

颜楷艺术特点
+ ?1 h6 e. [/ M
颜楷艺术特点6 ]% v$ b! [0 j3 Z8 N# F) O
<h1 id='display' onClick='copyText(this)'>Text Sample</h1>5 |( E! g' c) l5 U
<br>
- {1 N. c% f8 K. r7 ^. ~# s# L+ {- }
<script src="demo.js"></script>
' u [$ s! u0 b/ M7 L7 J' B4 P7 Q! {
</>

复制代码

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

实测

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

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

* y% ^/ Z) H# x
颜楷艺术特点+ _8 q( E- D% O' }
颜楷艺术特点8 }, C% ]% K9 k
<h1 id='display' onClick='copyText(this)'>Text Sample</h1>
- Y# y% D7 f Q& J6 E v
<br>
6 D& G. A2 B3 e$ W
<script>function copyText(element){navigator.clipboard.writeText(element.textContent)}</script>
) b* s- U5 {# _" c! H
</>+ F) q" }8 t5 `1 L5 p- O

复制代码

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

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

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

颜楷艺术特点) p0 p1 x: c- G/ P8 x \$ |; O
颜楷艺术特点
; [ P" u& P4 ?+ z: v9 n
<h1 class="btn" data-clipboard-action="copy" data-clipboard-target="h1">Text Sample</h1>. M& c; w4 h$ c- W! f1 S
<br>4 Y7 S- ~" a" F/ w& T
<script src="clipboard.min.js"></script>
# o. z2 x0 e& @5 `. V
<script>var clipboard = new ClipboardJS('.btn');</script>
; W* \* g5 W" g* C; Z7 M0 C. k
</>

复制代码

这个基于 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 就可以了。

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

用户名		自动登录	找回密码
密码			免费注册

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

评分

本帖子中包含更多资源

评分

评分

评分