1、如图位置是一个html中的可编辑内容的div标签,在里边输入文字,会有一个光标。
2、通过getSelection可以获得一个Selection对象,如图。因为是一个光标,anchor和focus(选择的起点和终点)一样,偏移也一样。
3、如图,则进行文字选择,而且是跨行选择,以第一行为起点,第二行为终点,选择文字。
4、再次getSelection,可以看到anchorNode是起始节点,anchorOffset是起始偏移,focus是结束的。
5、如果从第二行倒着选到第一行,使用getSelection获取选择区域,可以看到anchorNode和focusNode和刚才相比,互换了。
6、使用一个node的textContent属性可以获得文字。结合focusOffset和anchorOffset,实际上可以获取光标/选中区域前后的文字。
7、将起始和结束位置设置为相同,而且都在结束节点的末尾。即变成闪烁光标。
12
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
//禁用手机默认的触屏滚动行为
document.addEventListener('touchmove', function(event) {
event.preventDefault()
}, false)
//touchstart事件
function touchSatrtFunc(evt) {
try {
//evt.preventDefault()//阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]//获取第一个触点
var x = Number(touch.pageX)//页面触点X坐标
var y = Number(touch.pageY)//页面触点Y坐标
//记录触点初始位置
startX = x
startY = y
} catch (e) {
alert('touchSatrtFunc:' + e.message)
}
}
//touchmove事件,这个事件无法获取坐标
function touchMoveFunc(evt) {
try {
//evt.preventDefault()//阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]//获取第一个触点
var x = Number(touch.pageX)//页面触点X坐标