Home > スポンサー広告 > テキストボックスにフォーカスを移す

スポンサーサイト

スポンサー広告

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments:-

2010-07-09 (金) 18:47

このコメントは管理者の承認待ちです

Comment Form

Trackback+Pingback:-

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/173-0388f0f5
Listed below are links to weblogs that reference
スポンサーサイト from Karafuto Blog
Trackback from by edvakf in hatena 2008-09-13 (土) 04:47

[JavaScript]最初のテキストボックスにフォーカスするのはrange.select()でやったらウハウハになれた

メモ。 Karafuto Blog: テキストボックスにフォーカスを移す 上の記事では、DOM的に一番最初にある input type=”text” 要素にフォーカスを当てるスクリプトを作っている。 もちろん、一番最初に来るテキストボックスがページ内検索欄 (または類似用途のもの) であること... (more…)

Trackback from 2013-12-30 (月) 01:00

-

管理人の承認後に表示されます (more…)

Home > スポンサー広告 > テキストボックスにフォーカスを移す

Home > javascript > テキストボックスにフォーカスを移す

テキストボックスにフォーカスを移す

javascript

JavaScriptでテキストボックスにフォーカスを移す時のメモ。

ウェブページの最初のテキストボックスにフォーカスを移す。テキストボックスには文字列が入力されているとする。

テキストボックスにフォーカスを移す

// テキストボックスを取得
var input = document.getElementsByTagName('input');
for (var i = 0; i < input.length; i ++){
    if (input[i].type == 'text') break;
}
var textbox = input[i];
// テキストボックスにフォーカス
textbox.focus();

カーソル位置は移動しない。

テキストボックスの文字列を選択して、フォーカスを移す

// テキストボックスを取得
var input = document.getElementsByTagName('input');
for (var i = 0; i < input.length; i ++){
    if (input[i].type == 'text') break;
}
var textbox = input[i];
// テキストボックスを選択、フォーカス
textbox.select();
textbox.focus();

テキストボックスを空にして、フォーカスを移す

// テキストボックスを取得
var input = document.getElementsByTagName('input');
for (var i = 0; i < input.length; i ++){
    if (input[i].type == 'text') break;
}
var textbox = input[i];
// テキストボックスを空にして、フォーカス
textbox.value = '';
textbox.focus();

Opera 9.2なら下のコードでも、テキストボックスは空になっていたが、Opera 9.5からは文字列は残り、選択された状態でフォーカスが移るようになったようだ。

// テキストボックスを取得
var input = document.getElementsByTagName('input');
for (var i = 0; i < input.length; i ++){
    if (input[i].type == 'text') break;
}
var textbox = input[i];
// テキストボックスを空にして、フォーカス
textbox.focus();
textbox.select();
document.body.focus();
textbox.focus();

テキストボックスにフォーカスを移し、カーソルを文字列の最初に移動する。

// テキストボックスを取得
var input = document.getElementsByTagName('input');
for (var i = 0; i < input.length; i ++){
    if (input[i].type == 'text') break;
}
var textbox = input[i];
// テキストボックスにフォーカス、カーソル移動
textbox.focus();
textbox.setSelectionRange(0, 0);

'setSelectionRange'は選択範囲を設定するメソッド。第一引数と第二引数を同じ数にするとカーソル移動になる。

テキストボックスにフォーカスを移し、カーソルを文字列の最後に移動する。

// テキストボックスを取得
var input = document.getElementsByTagName('input');
for (var i = 0; i < input.length; i ++){
    if (input[i].type == 'text') break;
}
var textbox = input[i];
// テキストボックスにフォーカス、カーソル移動
textbox.focus();
textbox.setSelectionRange(textbox.value.length, textbox.value.length);

下記の TextRangeオブジェクトでもカーソル移動を試したが、うまく行かなかった。TextRangeオブジェクトの moveメソッドの第二引数にどの数値を入れても、文字列の先頭にカーソルが移動してしまう。

// テキストボックスを取得
var input=document.getElementsByTagName('input');
for(var i = 0; i < input.length; i ++){
    if (input[i].type == 'text')
        break;
}
var textbox = input[i];
// テキストボックスにフォーカス、カーソル移動
var range = textbox.createTextRange();
range.move('character', textbox.value.length);
range.select();

参考にしたページ

Comments:1

2010-07-09 (金) 18:47

このコメントは管理者の承認待ちです

Comment Form

Trackback+Pingback:2

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/173-0388f0f5
Listed below are links to weblogs that reference
テキストボックスにフォーカスを移す from Karafuto Blog
Trackback from by edvakf in hatena 2008-09-13 (土) 04:47

[JavaScript]最初のテキストボックスにフォーカスするのはrange.select()でやったらウハウハになれた

メモ。 Karafuto Blog: テキストボックスにフォーカスを移す 上の記事では、DOM的に一番最初にある input type=”text” 要素にフォーカスを当てるスクリプトを作っている。 もちろん、一番最初に来るテキストボックスがページ内検索欄 (または類似用途のもの) であること... (more…)

Trackback from 2013-12-30 (月) 01:00

-

管理人の承認後に表示されます (more…)

Home > javascript > テキストボックスにフォーカスを移す

おまかせリンク(R)
全記事表示リンク
Search
Meta
Feeds

Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。