-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathPinYin.html
151 lines (141 loc) · 3.82 KB
/
PinYin.html
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>在线拼音输入法 - 784040932</title>
<script language="javascript">
window.onload=function(){
BodyOnLoad();
}
</script>
<style type="text/css">
<!--
textarea, input, select {
resize: none;
outline: none;
font-size: 1em;
}
form textarea {
font-size: 14px;
line-height: 160%;
width: 96%;
height: 200px;
padding: 4px;
margin-bottom: 10px;
}
#input {
width: 400px;
position: absolute;
float: left;
}
#Comp {
width: 140px;
font-size: 14px;
margin-right: 5px;
float: left;
}
#Cand {
max-width: 200px;
height: 205px;
font-size: 14px;
overflow: hidden;
float: left;
}
footer {
bottom: 20px;
margin-bottom: 20px;
position: absolute;
}
-->
</style>
</head>
<body>
<form>
<textarea id="InputArea" onkeypress="return ImeKeyPress(event)" onkeydown="return ImeKeyDown(event)" onkeyup="return ImeKeyUp(event)" onmouseover="this.focus();this.select()" class="form-control"></textarea>
</form>
<div id="input">
<div>
<input name="Comp" id="Comp" onfocus="IME.InputArea.focus();">
</div>
<div>
<textarea name="Cand" id="Cand" onFocus="IME.InputArea.focus();"></textarea>
</div>
</div>
<div>
<input id="EnglishMode" onfocus="IME.InputArea.focus()" type="checkbox" name="EnglishMode">英文(Ctrl)
<input id="FullShape" onfocus="IME.InputArea.focus()" type="checkbox" name="FullShape">全角字符(F12)
<input id="AutoUp" onfocus="IME.InputArea.focus()" type="checkbox" name="AutoUp">自动上屏
翻页 PageUp/PageDown
</div>
<footer>
V1.1 By 784040932.
</footer>
<script language="javascript" src="pinyin.js"></script>
<script language="javascript" src="pinyinime.js"></script>
<script language="javascript">
var flag = false;//鼠标|手指是否按下的标记
var cur = {//记录鼠标|手指按下时的坐标
x:0,
y:0
}
var nx,ny,dx,dy,x,y ;
//按下时的函数
function down(){
flag = true;//确认鼠标|手指按下
var touch ;
if(event.touches){
touch = event.touches[0];//多个鼠标|手指事件取第一个
}else {
touch = event;
}
cur.x = touch.clientX; //记录鼠标|手指当前的x坐标
cur.y = touch.clientY;//记录鼠标|手指当前的y坐标
dx = input.offsetLeft;//记录div当时的左偏移量
dy = input.offsetTop;//记录div的上偏移量
}
function move(){
if(flag){//如果是鼠标|手指按下则继续执行
var touch ;
if(event.touches){
touch = event.touches[0];
}else {
touch = event;
}
nx = touch.clientX - cur.x;//记录在鼠标|手指x轴移动的数据
ny = touch.clientY - cur.y;//记录在鼠标|手指y轴移动的数据
x = dx+nx; //div在x轴的偏移量加上鼠标|手指在x轴移动的距离
y = dy+ny; //div在y轴的偏移量加上鼠标|手指在y轴移动的距离
input.style.left = x+"px";
input.style.top = y +"px";
//阻止页面的滑动默认事件
document.addEventListener("touchmove",function(){
event.preventDefault();
},false);
}
}
//鼠标|手指释放时候的函数
function end(){
flag = false; //鼠标|手指释放
}
var input = document.getElementById("input");
input.addEventListener("mousedown",function(){
down();
},false);
input.addEventListener("touchstart",function(){
down();
},false)
input.addEventListener("mousemove",function(){
move();
},false);
input.addEventListener("touchmove",function(){
move();
},false)
document.body.addEventListener("mouseup",function(){
end();
},false);
input.addEventListener("touchend",function(){
end();
},false);
</script>
</body>
</html>