苏南大叔再来普及一个非常常见的electron需求的写法,那就是:窗口内的文字不能被选中(复制)。这个对于客户端来说,这个需求还算是比较合理的。因为毕竟这个客户端不同于网页,如果窗体内的文字可以被任意选中复制的话,确实是有些怪异。那么,本文就是讲述,如何解决文字禁止选中的问题的。

苏南大叔:electron如何禁止选择页面文字?禁止选择文字方案大全 - electron-no-select
electron如何禁止选择页面文字?禁止选择文字方案大全(图3-1)

本文测试环境:mac/electron@5.0.2。这里需要特殊说明的是:本文中的方案,并不仅仅适用于electron,普通的网页也是适用的,同样具有借鉴意义。苏南大叔就是强制归结于electron这一分类里面的。您懂的~

基本结构

演示页面就是一个div,然后加上一个textareainput。后两者属于输入框,所以,默认是可以选择的。而div里面的文字,是我们本次的目标,不能被选择。

<div>不能选择的文字</div>
<textarea>可以选择的文字</textarea><br>
<input type="text" value="可以选择的文字">

苏南大叔:electron如何禁止选择页面文字?禁止选择文字方案大全 - no-select-code
electron如何禁止选择页面文字?禁止选择文字方案大全(图3-2)

额外说明

除了可输入框之外,其它的常见页面元素,使用上述两个方案的任何一个之后,都是可以做到不能选中的。如果想统一设置,就设置在<body>标签里面。如果想单独设置,那就设置在对应的元素的属性里面。例如:

<div style="user-select: none;">不能选择的文字</div>

或者

<div onselectstart="return false">不能选择的文字</div>

在苏南大叔的测试中,上述两者定义在textarea或者input等输入框上的时候,是不生效的。如果您想输入框也禁止选中的话,请注意写其它的js事件吧,这个并不是本文讨论的范畴。

苏南大叔:electron如何禁止选择页面文字?禁止选择文字方案大全 - ele_noselect
electron如何禁止选择页面文字?禁止选择文字方案大全(图3-3)

总结

本文的方案,还是比较有代表性的。两种方案,任选其一即可。更多electron相关经验文字,请点击:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   electron

本站的忠实读者小伙伴,正在阅读下面这些文章: