转自FR.richer的好文章:
各种浏览器下文本域中光标的定位关注用户体验,减少用户点击鼠标的次数,回复某人,点击回复之后,直接把光标定位到“回复XXX:”之后
测试页面如下:
01
?<!DOCTYPE html PUBLIC?
"-//W3C//DTD Xhtml 1.0 Transitional//EN"
?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>?
02
?<html xmlns=
"http://www.w3.org/1999/xhtml"
>?
03
?<html>?
04
?
<head>?
05
?
<meta http-equiv=
"content-Type"
?content=
"text/html; charset=utf-8"
?/>?
06
?
<title> JS光标处理 </title>?
07
?
<meta name=
"Author"
?content=
"草依山@02web.com/hublog/"
>?
08
?
<meta name=
"Keywords"
?content=
" js cursor location "
>?
09
?
<meta name=
"Description"
?content=
" JS在文本框中的光标处理 "
>?
10
?
<script type=
"text/javascript"
>?
11
?
var
?$ =?
function
( _id ) {?
return
?typeof
?_id ===?
'string'
?? document.getElementById( _id ) :?
null
?};?
12
?
13
?
doReply =?
function
()?
14
?
{?
15
?
var
?replyBox = $(?
'reply'
?);?
16
?
17
?
replyBox.value +=?
"回复XXX:"
;?
18
?
19
?
replyBox.focus();?
20
?
}?
21
?
</script>?
22
?
</head>?
23
?
24
?
<body>?
25
?
<a href=
"#"
?onclick=
"doReply()"
>我是小星哈哈</a>?
26
?
<br/>?
27
?
<textarea name=
"reply"
?id=
"reply"
?rows=
"6"
?cols=
"20"
></textarea>?
28
?
<br/>?
29
?
<a href=
"http://www.google.com"
?title=
"搜索"
>小星星</a>?
30
?
</body>?
31
?</html>
恩, 这是第一个页面,点击我是小星,文本域里会出现回复XXX字样,在火狐下光标会默认聚集到最后,在IE下如果你在点我是小星之前的光标是在文本域中的,那 么你很幸运,光标还是在最后,但是在你点我是小星之前光标不是在文本域,这时光标就会定位到最前面,看到现象了,那我们就知道怎么办了,在IE下每次点击 填文字之前先focus一下就行了,有了下面的改进的doReply函数
01
?doReply =?
function
()?