..

JavaScriptの入門とサンプル集
■JavaScript入門−フォーム編−テキスト部品各種　　　　　■戻る　　　　　■次へ　　　　　■Home
■テキストフィールド・テキストエリア・パスワード・ファイル選択　

　テキスト部品をJavaScriptで制御する方法を説明します。
★テキストフィールド
　◇HTML

　　<input type="text" name="テキストフィールド名" value="フィールドの文字">

★テキストエリア

　◇HTML

　　<textarea rows="行" cols="列" name="テキストエリア名">
　　テキストエリアの文字
　　</textarea>
★パスワード

　◇HTML

　　<input type="password" name="パスワードフォーム名">

★ファイル選択

　　<input type="file" name="ファイル選択フォーム名">


　◇テキスト部品をJavaScriptで制御する方法

　　document.フォームオブジェクト.エレメント（部品）オブジェクト.value

　　　テキストフィールドの文字の情報を読み書きする

　　document.フォームオブジェクト.エレメントオブジェクト.defaultvalue

　　　テキスト部品の初期値を設定します。セキュリティのためファイル部品には
　　　設定できません

　　document.フォームオブジェクト.エレメントオブジェクト.select()

　　　テキスト部品のテキストを選択状態にします　　　
　フォームオブジェクトの部分は<form>タグの「name」属性で指定したフォーム名の他、下記のような方法で指定することができます。
　　　document.forms[参照番号]（ページ先頭からのフォーム数で０からの通し番号）
　　　document.forms["フォーム名"]

　エレメントオブジェクトの部分は「name」属性で指定したテキスト部品名の他、下記のような方法で指定することができます。
　　　document.フォームオブジェクト.elements[参照番号]
　　　（参照番号はフォームの先頭からのエレメント（部品）数で０からの通し番号）


　それでは、テキストエリアに時刻を表示するサンプルプログラムを見てみましょう。

<html>
<head>
<title>テキストフォームに時刻を表示</title>

<script language="JavaScript"><!--
function tokei()
{
   dt=new Date();
   h=dt.getHours();
   m=dt.getMinutes();
   s=dt.getSeconds();
   document.myForm.myText.value="時刻"+h+":"+m+":"+s;
}

setInterval('tokei()',1000);

// --></script>

</head>

<body>
<form name="myForm">
<input type="text" name="myText">
</form>
</body>
</html>

 〜sample22.html〜のリスト





関数「tokei」の定義

「Date」オブジェクトの生成
時刻情報の取得


テキストフォームへの書き込み


関数「tokei」を１秒間隔で割り込み処理






テキストフォームの設定

　　　■sample22.htmlを実行する


sample22.htmlの実行画面


..
■JavaScript入門−フォーム編−テキスト部品各種　　　　　■戻る　　　　　■次へ　　　　　■Home

..