My favorites
▼
|
Sign in
interjc
jc's personal studio
Project Home
Downloads
Source
Export to GitHub
READ-ONLY: This project has been
archived
. For more information see
this post
.
Search
Search within:
All issues
Open issues
New issues
Issues to verify
for
Advanced search
Search tips
Subscriptions
Issue
1
attachment: cursor.html
(3.9 KB)
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0038)http://www.cssrain.cn/demo/cursor.html -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
body { margin: 32px; font-family: Verdana, sans-serif; font-size: 13px; }
.title { font-size: 18px; font-weight: bolder;margin:40px 0; }
.input { width: 50%; font-family: Verdana, sans-serif; font-size: 13px; text-indent: 2px; }
</style>
<script>
//获取光标位置
//单行文本框
function getPositionForInput(ctrl){
var CaretPos = 0;
if (document.selection) { // IE Support
ctrl.focus();
var Sel = document.selection.createRange();
Sel.moveStart('character', -ctrl.value.length);
CaretPos = Sel.text.length;
}else if(ctrl.selectionStart || ctrl.selectionStart == '0'){// Firefox support
CaretPos = ctrl.selectionStart;
}
return (CaretPos);
}
//多行文本框
function getPositionForTextArea(ctrl) {
var CaretPos = 0;
if(document.selection) {// IE Support
ctrl.focus();
var Sel = document.selection.createRange();
var Sel2 = Sel.duplicate();
Sel2.moveToElementText(ctrl);
var CaretPos = -1;
while(Sel2.inRange(Sel)){
Sel2.moveStart('character');
CaretPos++;
}
}else if(ctrl.selectionStart || ctrl.selectionStart == '0'){// Firefox support
CaretPos = ctrl.selectionStart;
}
return (CaretPos);
}
//设置光标位置函数
function setCursorPosition(ctrl, pos){
if(ctrl.setSelectionRange){
ctrl.focus();
ctrl.setSelectionRange(pos,pos);
}
else if (ctrl.createTextRange) {
var range = ctrl.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
//test
function process( id,targetId ){
var no = document.getElementById(id).value;
setCursorPosition(document.getElementById(targetId),no);
}
</script>
<link id="drag-style" rel="stylesheet" href="chrome-extension://mfjkgbjaikamkkojmakjclmkianficch/style.css" type="text/css"></head>
<body>
<div class="title">JavaScript 获取/设置光标位置,兼容Input&&TextArea:</div>
<div class="title">单行文本框</div>
<p><input class="input" id="textbox" name="textbox" value="Hi,CssRain!!!"></p>
<input type="button" onclick="alert( getPositionForInput( document.getElementById('textbox') ) )" value="Get Position">
输入位置: <input type="text" id="no1" size="1"><input type="button" onclick="process('no1','textbox');" value="Set Position">
<div class="title">多行文本框</div>
<textarea id="zhangdanNum" name="zhangdanNum" style="height:66px;width:246px;overflow:hidden">Hi,CssRain!!!</textarea>
<input type="button" onclick="alert( getPositionForTextArea( document.getElementById('zhangdanNum') ) )" value="Get Position">
输入位置: <input type="text" id="no2" size="1"><input type="button" onclick="process('no2','zhangdanNum');" value="Set Position">
<div class="title">
<!--google广告开始-->
<div style="text-align:center;margin-top:140px;">
<script type="text/javascript"><!--
google_ad_client = "pub-0545040803774316";
/* 728x90, 创建于 08-6-5 */
google_ad_slot = "7034803449";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript" src="./cursor_files/show_ads.js">
</script><script src="./cursor_files/show_ads_impl.js"></script><script src="./cursor_files/expansion_embed.js"></script><script src="./cursor_files/test_domain.js"></script><script>google_protectAndRun("ads_core.google_render_ad", google_handleError, google_render_ad);</script>
</div>
<!--google广告结束-->
<br>
<a href="http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea/comment-page-4/">参考</a>
And <a href="http://www.cssrain.cn/">CssRain.cn</a>
</div>
</body></html>
Powered by
Google Project Hosting