[javascript]ブラウザ下のテキストドメインカーソルの位置
6555 ワード
[javascript]ブラウザ下のテキストドメインカーソルの位置
FR.richerから良い記事を転送します.各種ブラウザの下でテキストドメインのカーソルの位置を指定します.
ユーザーの体験に注目して、ユーザーがマウスをクリックする回数を減らして、ある人に返答して、クリックして返答した後に、直接カーソルを“XXXに返答します:”に位置した後に
テストページは以下の通りです.
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() 02 { 03
04
var replyBox = $( 'reply' ); 05
06
replyBox.focus(); 07
08
replyBox.value += " XXX:"; 09
10
replyBox.focus(); 11 }これはいい を しましたが、もしある カーソルを に くように されたら、IEの でやりやすいです.まずテキスト に を わせてから、 を して、focusに ってもいいです. でだめだと したら、 したとしても、 はどうすればいいですか?それに の もずっと つの ではないです. なものがありますか? のさらなる な けの を けるために、カーソルの けをしましょう.リッチテキストエディタでよく われていますが、こことはまた うようです. なリッチテキストエディタ、 えば、ティンマイMceとckEditorはすべてiframeをテキストとして したエリアです.ここはテキストドメインだけです.
IEがサポートするtextRangeはこれを に できます.IEのこのオブジェクトについては にここを ることができます.ここを してください. には、ドキュメントの の に してください. つの を じにすれば、カーソルを の に させ、 されていません.OK、setsCurorPos を します.01 var setCursorPos = function( el, pos ) 02 { 03
if( el.createTextRange ) 04
{ 05
var rng = el.createTextRange(); // textRange 06
rng.moveStart( 'character', pos ); // rng 07
rng.collapse( true ); // 08
rng.select();// 09
el.focus(); 10
}else if( el.setSelectionRange ) 11
{ 12
el.focus(); // 13
el.setSelectionRange( pos , pos ); // 14
} 15 }これらがあれば、ページをもう り すことができます.