马黑黑 发表于 2023-1-10 19:43

知你所选

<style>
#mybox {
        margin: 20px auto;
        width: 100%;
        border: 1px solid #ccc;
        padding: 10px;
        position: relative;
}
</style>

<pre id="mybox">
        去年元夜时，花市灯如昼。
        月上柳梢头，人约黄昏后。
        今年元夜时，月与灯依旧。
        不见去年人，泪湿春衫袖。
</pre>
<div>请选择上面的文本：<p><span id="showbox">尚未选择</span></p></div>

<script>
mybox.onclick = () => {
        let aa = window.getSelection();
        let start = aa.anchorOffset, end = aa.focusOffset;
        let msg = '';
        if (start === end) {
                msg = '单击未选择';
        } else {
                msg = end > start ? '自左向右选择' : '自右向左选择';
        }
        msg = '<span style="color: red">' + msg + '</span><mark><br><br>' + aa.toString().replace('\n','<br>') + '</mark>';
        showbox.innerHTML = msg;
}
</script>

马黑黑 发表于 2023-1-10 19:46

以上方法，甚至可以监听用户在整个页面对内容的选取。低调一点，弄弄自己的范围内的东东就好。

红影 发表于 2023-1-10 20:10

有趣，选什么就在下面看到了什么{:4_199:}

红影 发表于 2023-1-10 20:11

这个把分行的信息也一并接收过来了呢。

马黑黑 发表于 2023-1-10 20:24

红影 发表于 2023-1-10 20:10
有趣，选什么就在下面看到了什么

选什么是次要的，怎么选才是利害所在

马黑黑 发表于 2023-1-10 20:25

红影 发表于 2023-1-10 20:11
这个把分行的信息也一并接收过来了呢。

分行信息不是最重要，最重要的是怎么选

红影 发表于 2023-1-10 21:49

马黑黑 发表于 2023-1-10 20:24
选什么是次要的，怎么选才是利害所在

哦哦，这个是程序里设定好的吧。

红影 发表于 2023-1-10 21:51

马黑黑 发表于 2023-1-10 20:25
分行信息不是最重要，最重要的是怎么选

哦哦，还能判断是从那边选择的。

马黑黑 发表于 2023-1-10 23:07

红影 发表于 2023-1-10 21:51
哦哦，还能判断是从那边选择的。

这个要敲黑板

马黑黑 发表于 2023-1-10 23:09

红影 发表于 2023-1-10 21:49
哦哦，这个是程序里设定好的吧。

随机选什么都会被知道从哪往哪选，这是由API接口的，我把这个接口的数据调出来就可以了

红影 发表于 2023-1-11 10:34

马黑黑 发表于 2023-1-10 23:07
这个要敲黑板

没注意听讲{:4_173:}

红影 发表于 2023-1-11 10:35

马黑黑 发表于 2023-1-10 23:09
随机选什么都会被知道从哪往哪选，这是由API接口的，我把这个接口的数据调出来就可以了

API接口的概念特别陌生。

马黑黑 发表于 2023-1-11 12:14

红影 发表于 2023-1-11 10:35
API接口的概念特别陌生。

API是 Application Programming Interface 的缩写，意思是应用程序接口。应用程序是有扩展功能的，预留给第三方开发者和使用者进行二次开发以方便工作。接口会将应用程序的一些必要的属性、变量、方法甚至函数暴露出来，人们通过这些暴露的东东获得二次开发的操作入口。例如电子表格Excel的公式，就是通过暴露内置函数的方法让使用者调用Excel内置的各类运算封装，做成公式以高效完成特定运算工作。

web里的DOM（文档）会使用诸多的元素，其中，每一个元素在封装时都会留有接口，尤其是控件类的元素，像 audio、input、textarea等。我这帖子是针对 pre 标签 的，它和其他大多数可装载文本的元素一样，存在一些公共接口（比如文本选择的方向），使用 JS 的相关函数和方法，就能拿到用户选择文本的方向和选择的文本内容。

马黑黑 发表于 2023-1-11 12:15

红影 发表于 2023-1-11 10:34
没注意听讲

理解，上课开小差是多数人的常态

红影 发表于 2023-1-11 15:18

马黑黑 发表于 2023-1-11 12:14
API是 Application Programming Interface 的缩写，意思是应用程序接口。应用程序是有扩展功能的，预留给 ...

应用程序留有接口真好，让使用者有更多的自主性{:4_204:}

红影 发表于 2023-1-11 15:20

马黑黑 发表于 2023-1-11 12:15
理解，上课开小差是多数人的常态

敲了黑板会警醒过来，当然，也有人黑板敲碎也醒不过来{:4_173:}

马黑黑 发表于 2023-1-11 19:41

红影 发表于 2023-1-11 15:20
敲了黑板会警醒过来，当然，也有人黑板敲碎也醒不过来

喝多了

马黑黑 发表于 2023-1-11 19:41

红影 发表于 2023-1-11 15:18
应用程序留有接口真好，让使用者有更多的自主性

很不错的设计

红影 发表于 2023-1-11 20:08

马黑黑 发表于 2023-1-11 19:41
喝多了

或者不想醒，人们叫不醒装睡的人。

红影 发表于 2023-1-11 20:08

马黑黑 发表于 2023-1-11 19:41
很不错的设计

是啊，很赞{:4_187:}
页: [1] 2
查看完整版本: 知你所选