找回密码
 快速注册
搜索
查看: 119|回复: 12

选择标题

[复制链接]

3149

主题

8386

回帖

6万

积分

$\style{scale:11;fill:#eff}꩜$

积分
65391
QQ

显示全部楼层

hbghlyj 发表于 2022-8-5 08:01 |阅读模式
本帖最后由 hbghlyj 于 2022-8-5 19:25 编辑 建议把标题栏右边的图片都设为
style="user-select: none"
这样一来,双击标题复制的时候就不会把“下一主题”也复制上了. 详见下面的GIF图:
checker.gif
双击选择标题会把同一行的最右边的箭头图片的替换文字“下一主题”也选中.
QQ图片20220803044150.png
只要设定了user-select就可以解决此问题.

3149

主题

8386

回帖

6万

积分

$\style{scale:11;fill:#eff}꩜$

积分
65391
QQ

显示全部楼层

 楼主| hbghlyj 发表于 2022-8-5 08:08
另外,我在StackOverflow读到<input>加上onclick="this.select();"就可以实现“点击即全选”
测试:

730

主题

1万

回帖

9万

积分

积分
93613
QQ

显示全部楼层

kuing 发表于 2022-8-5 13:56
我这里双击并不会全选,只会选择双击处的一个词。
三击才会全选,但也不会选中“下一主题”,但是会把“[复制链接]”也选中。

3149

主题

8386

回帖

6万

积分

$\style{scale:11;fill:#eff}꩜$

积分
65391
QQ

显示全部楼层

 楼主| hbghlyj 发表于 2022-8-5 21:33
kuing 发表于 2022-8-5 06:56
我这里双击并不会全选,只会选择双击处的一个词。
三击才会全选,但也不会选中“下一主题”,但是会把“[复 ...

加上style="user-select: none"就好了

3149

主题

8386

回帖

6万

积分

$\style{scale:11;fill:#eff}꩜$

积分
65391
QQ

显示全部楼层

 楼主| hbghlyj 发表于 2022-8-6 02:13
kuing 发表于 2022-8-5 06:56
我这里双击并不会全选,只会选择双击处的一个词。
三击才会全选,但也不会选中“下一主题”,但是会把“[复 ...


我有一个主意,改成2楼那种,单击标题即全选
利用selectNodeContents只需把onclick属性设为
  const selection = window.getSelection();
  selection.removeAllRanges();

  const range = document.createRange();
  range.selectNodeContents(this);
  selection.addRange(range);

QQ图片20220803044150.png
从图中可以发现,<h1>的子节点是<span>和一个空格(whitespace),
而使用上述办法不会把那个空格复制上
那个空格不属于标题,它的作用应该是分开标题和后面的[复制链接]


效果:
checker.gif

730

主题

1万

回帖

9万

积分

积分
93613
QQ

显示全部楼层

kuing 发表于 2022-8-25 18:58
单击标题即全选,也并不用设 onclick 这么麻烦,将标题那块设为
<span id="thread_subject" style="user-select: all">...
就行了

但是,如果我只想复制标题中的一个词,怎么办?

3149

主题

8386

回帖

6万

积分

$\style{scale:11;fill:#eff}꩜$

积分
65391
QQ

显示全部楼层

 楼主| hbghlyj 发表于 2022-8-25 20:45
kuing 发表于 2022-8-25 11:58
但是,如果我只想复制标题中的一个词,怎么办?


可以设双击即全选, 见MDN
addEventListener('dblclick', (event) => {});

730

主题

1万

回帖

9万

积分

积分
93613
QQ

显示全部楼层

kuing 发表于 2022-8-25 21:39
hbghlyj 发表于 2022-8-25 20:45
可以设双击即全选, 见MDN
addEventListener('dblclick', (event) => {});

嗯,这样是可以的。

不过这么点小细节我懒得改,你如果这么有需要,自己在油猴上实现就好了。

730

主题

1万

回帖

9万

积分

积分
93613
QQ

显示全部楼层

kuing 发表于 2022-8-25 21:47
hbghlyj 发表于 2022-8-25 21:42
还是改一下吧, 既然已经讨论了这么多 (●'◡'●)


讨论归讨论,讨论却实让我学到了东西,足矣,改不改已不重要。(●'◡'●)

730

主题

1万

回帖

9万

积分

积分
93613
QQ

显示全部楼层

kuing 发表于 2022-8-26 21:14
还是改了。
主要是考虑到其他地方将来或许也用得着,将 5# 那段定为一个函数 sNC 。
现在标题那块变成
  1. <span id="thread_subject" ondblclick="sNC(this)">...
复制代码

3149

主题

8386

回帖

6万

积分

$\style{scale:11;fill:#eff}꩜$

积分
65391
QQ

显示全部楼层

 楼主| hbghlyj 发表于 2022-9-16 22:11
Firefox双击会先把整行选中(包括后面的复制链接、打印),然后在半秒之内,缩小选区到标题
肉眼可见的延迟
三击会把整行选中(包括后面的复制链接、打印)

Chrome双击可以选择标题
没有肉眼可见的延迟
三击会把整行选中(包括后面的复制链接,不包括打印)

3149

主题

8386

回帖

6万

积分

$\style{scale:11;fill:#eff}꩜$

积分
65391
QQ

显示全部楼层

 楼主| hbghlyj 发表于 2022-9-16 22:12
kuing 发表于 2022-8-25 11:58
单击标题即全选,也并不用设 onclick 这么麻烦,将标题那块设为
...
就行了


好像把后面的复制链接、打印按钮设为user-select: none就行了

3149

主题

8386

回帖

6万

积分

$\style{scale:11;fill:#eff}꩜$

积分
65391
QQ

显示全部楼层

 楼主| hbghlyj 发表于 2023-2-27 06:04
kuing 发表于 2022-8-26 14:14
还是改了。
主要是考虑到其他地方将来或许也用得着,将 5# 那段定为一个函数 sNC 。
现在标题那块变成


还可完善一下: 选择标题时, 标题恢复为TeX源码
比如$a^2+b^2$恢复为\$a^2+b^2\$

手机版|悠闲数学娱乐论坛(第3版)

GMT+8, 2025-3-4 15:44

Powered by Discuz!

× 快速回复 返回顶部 返回列表