【おやじのweb技】 html/javascript/css等の基本技
winXP+IE6

TopPage表示 /  保　存 /  印　刷 /  Window Resize /  Window Close

b001

テキストフィールド(一行テキスト領域)を用いる

【目 次】
◇【技b001-1】テキストフィールドを用いる(基本)
◇【技b001-2】テキストフィールドを修飾する(スタイル属性)
　　　マウスカーソルの形ちを変更
　　　テキストフィールドの文字をセンタリング
　　　テキストフィールドの背景色や枠を飾る
　　　マウスカーソルを重ねると背景色が変化する
　　　日本語入力モードを設定する
◇【技b001-3-1】特定のテキストフィールドにフォーカスする
◇【技b001-3-2】テキストフィールドにフォーカスしたとき、入力文字の最後尾にカーソルを移動する
　　　テキトスフィールド毎にname属性を指定する方法
　　　switch関数を使用する方法(複数のテキストフィールドに適用)
◇【技b001-4】テキトスフィールドの使用可能/使用不可を切り換える
◇【解説等】

web工房 　Copyright(C) 2004 web工房 All Rights Reserved　
このページのトップに戻る /  Window Resize /  Window Close /  最終更新日表示

action
&
web技

 ｜topへ｜目次へ｜前へ｜次へ｜
【技b001-1】テキストフィールドを用いる(基本)


テキストフィールドに文字入力は可能ですがそれ以外の動作はしません

◆手順【html】テキストフィールド(一行テキスト領域)の基本記述
※<form>〜</form>に記述します。
※記述例
<input type="text" name="txtBOX" size="30" maxlength="100" value="(入力してね)">
※テキストフィールド(一行テキスト領域)のタグ(type="text")
　　type属性:<input type="text"〜>
　　name属性:<input name="□□" >
　　value属性:<input value="□□"> 初期値(最初に表示されるテキスト)
　　size属性:<input size="40">テキストフィールドの表示幅(%指定可能)
　　maxlength属性:  ※  <input maxlength="100">入力の最大桁数

　　無効化するとき:<input disabled>  文字全体が白色反転し使用不可
　　入力禁止(読取専用):<input readonly>  
｜topへ｜目次へ｜前へ｜次へ｜
【技b001-2】テキストフィールドを修飾する(スタイル属性)






■マウスカーソルの形ちを変更します
※テキストフィールドにマウスを重ねて下さい
◆<input type="text" style="cursor:default;">(矢印の例)
※(未設定)はスタイル属性を記述していません

※マウスカーソルの変更の詳細は
　[技m016]マウスカーソルの形を変える、を参照して下さい。


■テキストフィールドの文字をセンタリングします
◆<input type="text" style="text-align:center;">
※テキストの横方向の配置(style属性)
　　中央:center
　　左寄せ:left
　　右寄せ:right

■テキストフィールドの背景色や枠を飾ります
◆<input type="text"
　style="background-color:#ffffbb;border-color:#ff0000;border-style:solid;border-width:1;">
※枠の変更(style属性)
　　背景色:background-color
　　枠の色:border-color
　　枠のスタイル:border-style
　　枠の太さ:border-width

※枠のスタイルの詳細は
　[技c003]テーブル(表)の枠線の種類や色・幅を指定する、を参照して下さい。


■マウスカーソルを重ねると背景色が変化します
※テキストフィールドにマウスを重ねて下さい
◆<input type="text" name="txtBOX24" value="(マウスオン)"
　style="border-color:#ff0000;border-style:solid;border-width:1;"
　onmouseover="this.style.background='#80ffff'"
　onmouseout="this.style.background=''">

※マウスオンしたとき背景色等が変化する詳細は
　[技m004]表のセルにマウスを重ねると背景色・背景画像やフォントが変わる 、を参照して下さい。



■日本語入力モードを設定します
※テキストフィールドにフーォカスして文字入力して下さい
◆<input type="text"　style="ime-mode:active">
※日本語入力モードの変更(style属性)
　　自動:auto
　　日本語:active(既定の日本語が起動する)
　　半角英数字:inactive(日本語がインアクティブになる)

｜topへ｜目次へ｜前へ｜次へ｜
【技b001-3-1】特定のテキストフィールドにフォーカスする




下記のリンク文字をクリックして下さい
　　フィールド[1]にフォーカス
　　フィールド[2]にフォーカス
　　フィールド[3]にフォーカス

◆手順1【html】テキストフィールド(一行テキスト領域)
-----次の行から(copy)-----
<form name="FORM3">
<input type="text" name="txtBOX31" size="30" maxlength="100" value="(フィールド[1])">
...(複数のテキストフィールド)...
</form>
-----上の行まで(copy)-----

◆手順2【スクリプトの実行】リンク文字をクリックするとき
-----次の行から(copy)-----
<a href="javascript://" onclick="FORM3.txtBOX31.focus()">フィールド[1]にフォーカス</a>
-----上の行まで(copy)-----

◆特定のテキストフィールドにフォーカスしたとき、すでに文字が入力されていると、その前にカーソルがあって、追加入力するためにはカーソルを右に移動しなければなりません。
◇入力文字の最後尾にカーソルを移動する技を次にご紹介します。

｜topへ｜目次へ｜前へ｜次へ｜
【技b001-3-2】テキストフィールドにフォーカスしたとき、入力文字の最後尾にカーソルを移動する




下記のリンク文字をクリックして下さい
　　フィールド[34]にフォーカス(tips_1)
　　フィールド[36]にフォーカス(tips_1)
　　フィールド[35]にフォーカス(tips_2)
　　フィールド[36]にフォーカス(tips_2)

◆手順1【html】テキストフィールド(一行テキスト領域)

-----次の行から(copy)-----
<form name="FORM">
<input type="text" name="txtBOX34" size="30" maxlength="100" value="(フィールド[34])">
...(複数のテキストフィールド)...
</form>
-----上の行まで(copy)-----

◆手順2【スクリプトの実行】リンク文字をクリックするとき

-----次の行から(copy)-----
<a href="javascript://" onclick="C_Set(FORM.txtBOX34)">フィールド[34]にフォーカス</a>(tips_1)<br> <a href="javascript://" onclick="C_Set(FORM.txtBOX36)">フィールド[36]にフォーカス</a>(tips_1)<br> <a href="javascript://" onclick="C_Set2(35)">フィールド[35]にフォーカス</a>(tips_2)
<a href="javascript://" onclick="C_Set2(36)">フィールド[36]にフォーカス</a>(tips_2)
-----上の行まで(copy)-----

◆手順3-A【スクリプト/tips_1】テキトスフィールド毎にname属性を指定する方法
※<head>〜</head>に記述します
※スクリプトを実行する毎に対象となるテキストフィールドのname属性を指定しますので、毎回、同じスクリプトを使用できます。

-----次の行から(copy)-----
<script type="text/javascript">
function C_Set(t_Obj) {
　t_Obj.focus();
　tRNG=t_Obj.createTextRange();
　tRNG.move("character",t_Obj.value.length);
　tRNG.select();
}
</script> -----上の行まで(copy)-----

◆手順3-B【スクリプト/tips_2】switch関数を使用する方法
※<head>〜</head>に記述します
※スクリプトの実行に引数を付しswitch関数を使用します
-----次の行から(copy)-----
<script type="text/javascript">
function C_Set2(n) {
　switch(n){
　　case 35:
　　　WinObj=FORM.txtBOX35;
　　　break;
　　case 36:
　　　WinObj=FORM.txtBOX36;
　　　break;
　　}

　WinObj.focus();
　tRNG=WinObj.createTextRange();
　tRNG.move("character",WinObj.value.length);
　tRNG.select();
}
</script> -----上の行まで(copy)-----
｜topへ｜目次へ｜前へ｜次へ｜
【技b001-4】テキトスフィールドの使用可能/使用不可を切り換える

下記のリンク文字をクリックして下さい
　　フィールド[10]を使用可能に
　　フィールド[10]を使用不可に
※最初は使用不可(文字が反転して半透明に表示)になっています
※上記の例ではカーソルも変更しています

◆手順1【html】テキストフィールド(一行テキスト領域)
-----次の行から(copy)-----
<form name="FORM4">
<input type="text" name="txtBOX41" size="25" maxlength="100" value="(フィールド[10])" style="cursor:not-allowed;" disabled><br>
</form>
-----上の行まで(copy)-----

◆手順2【スクリプト】リンク文字をクリックするとき
-----次の行から(copy)-----
<a href="javascript://" onclick="FORM4.txtBOX41.disabled=false;FORM4.txtBOX41.focus();FORM4.txtBOX41.style.cursor='default';">
　フィールド[10]を使用可能に</a><br>
<a href="javascript://" onclick="FORM4.txtBOX41.disabled=true;FORM4.txtBOX41.style.cursor='not-allowed';">
　フィールド[10]を使用不可に</a><br>
-----上の行まで(copy)-----

｜topへ｜目次へ｜前へ｜

解説等

◆テキストフィールドはフォームの中で基本的な技で、データ入力の他、変化する数値の表示(日付や時間、画像番号等)にたびたび用いられます。

keyword

◇input◇type◇text◇focus()

history

◇(2004.09.30)日本語入力モードの設定を追加
◇(2004.09.26)内容を大幅に拡充
◇(2004.05)設置

注意

◆操作MENUの[Window Resize]を選択するとウィンドウサイズが変更可能です。
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----

access count