| ポイント |
<![CDATA[
document.myFORM.myText.value = str.substring(count++,str.length+1);
count %= str.length;
setTimeout('moveText()',250);
]]>
|
| 説 明 |
テキストフィールドに文字を表示するには「document.フォーム名.テキストフィールド名.value」に表示したい文字を設定します。表示する文字をスクロール（移動）させるには表示する文字の文字位置を抜き出します。文字列を範囲指定して抜き出すにはsubstring()を使います。抜き出す位置をcount（カウント用変数）に保持しておき一定時間ごと加算していきます。ただし、このままでは左端まで移動した文字は二度と表示されなくなってしまうため%を使って剰余を求めカウントを0に戻します。一定時間ごと処理させるにはsetTimeout()を使います。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>テキストフィールドの文字をスクロールさせる</title>
<script Language="JavaScript"><!--
count = 0;
str = " by K.Furuhata";
function moveText()
{
document.myFORM.myText.value = str.substring(count++,str.length+1);
count %= str.length;
setTimeout('moveText()',250);
}
// --></script>
</head>
<body onLoad="setTimeout('moveText()',250)">
<form name="myFORM">
<input type="text" name="myText" size="10">
</form>
</body>
</html>
]]>
|
| 補足説明 |
Mac版IE5では表示する文字列の先頭が半角文字だと正しく表示されないため全角空白を使う必要があります。また、IE5以降では全角空白も半角空白と同じ処理をされてしまうため以下のようにスクリプトを書かないとうまく動作しない場合があります。下記スクリプト中において変数tmaxがテキストフィールド内に表示する文字数になりますので、<input type="text" size="xxx">のxxxで指定する表示文字数とおおよそ一致している必要があります。
<![CDATA[
<html>
<head>
<title>テキストフィールドの文字をスクロールさせる</title>
<script Language="JavaScript"><!--
count = 0;
str = " こんな具合でどうかな？";
tmax = 6;
function moveText()
{
document.myFORM.myText.value = str.substr(count++,tmax);
count %= str.length;
setTimeout('moveText()',250);
}
// --></script>
</head>
<body onLoad="setTimeout('moveText()',250)">
<form name="myFORM">
<input type="text" name="myText" size="10">
</form>
</body>
</html>
]]>
|
|
■サンプルスクリプトを実行する >>実行
■サンプルスクリプトを実行する >>実行 (code2/IE5)
■各ブラウザでの動作結果を見る >>View!
|
テキストフィールドの文字をスクロールさせる