1
2
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
|
<html>
<style>
/* Use a font with characters of fixed width to make it easier to test
selection gestures precisely. */
@font-face {
font-family: 'Ahem';
src: local('Ahem'),
url('../../font/Ahem.ttf');
}
div, input {
font-size: 15px;
font-family: "Ahem";
}
/* Add space to separate the touch selection targets. */
.padded {
margin-bottom: 30px;
}
</style>
<body>
<div>Dummy Padding Text</div>
<div id='textDiv' class='padded'>Some text we can select</div>
<div>Dummy Padding Text</div>
<input id='textfield' class='padded' type="text" value="Some editable text">
<div>Dummy Padding Text</div>
<input id='emptyTextfield' class='padded' type="text" value="">
</body>
<script>
function focus_textfield() {
document.getElementById('textfield').focus();
// Focusing the textfiled selects its text. Collapse selection to a cursor.
window.getSelection().collapseToStart();
}
// Returns the top left point of an element, excluding border and padding.
function get_top_left(element) {
var rect = element.getBoundingClientRect();
var cs = getComputedStyle(element);
var point = {
x: rect.left + parseFloat(cs.borderLeft) + parseFloat(cs.paddingLeft),
y: rect.top + parseFloat(cs.borderTop) + parseFloat(cs.paddingTop)
};
return JSON.stringify(point);
}
function get_top_left_of_text() {
return get_top_left(document.getElementById('textDiv'));
}
function get_top_left_of_textfield() {
return get_top_left(document.getElementById('textfield'));
}
function get_top_left_of_empty_textfield() {
return get_top_left(document.getElementById('emptyTextfield'));
}
</script>
</html>
|
