第43回 「テキストフィールドへの入力許可・禁止」
今回はテキストフィールドへの入力許可・禁止の制御を行ってみます。
テキストフィールドへの入力を禁止するにはHTMLタグレベルでも可能です。テキストフィールドの入力を禁止するにはdisabledを指定します。以下のように記述するとテキストフィールドへの入力ができなくなります。
<input type="text" name="OSType" disabled>
しかし、このままでは永久に入力できない状態になってしまいますのでJavaScriptによる処理が必要です。JavaScriptでテキストフィールドへの入力の許可・禁止はdisabledにtrueかfalseを指定することで制御することができます。trueであれば入力禁止、falseであれば入力許可となります。
フォーム名がosFORM、テキストフィールド名がOSTypeの場合以下のように指定します。
●入力許可
document.osFORM.OSType.disabled = false
●入力禁止
document.osFORM.OSType.disabled = true
実際のプログラムは以下のようになります。以下のプログラムはラジオボタンでその他が選択された場合にテキストフィールドへの入力を許可します。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function setTextField(flag)
{
document.osFORM.OSType.disabled = flag;
}
// --></script>
</head>
<body>
<form name="osFORM">
<input type="radio" name="OS" onClick="setTextField(true)" checked>MacOS<br>
<input type="radio" name="OS" onClick="setTextField(true)">Windows<br>
<input type="radio" name="OS" onClick="setTextField(true)">UNIX<br>
<input type="radio" name="OS" onClick="setTextField(false)">その他<br>
<input type="text" name="OSType" disabled><br>
</form>
</body>
</html>
なるべくフォーム名やテキストフィールド名や位置などに依存しないようにするにはthisを使って以下のように記述します。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function setTextField(fObj,flag)
{
fObj.disabled = flag;
}
// --></script>
</head>
<body>
<form name="osFORM">
<input type="radio" name="OS" onClick="setTextField(this.form.OSType,true)" checked>MacOS<br>
<input type="radio" name="OS" onClick="setTextField(this.form.OSType,true)">Windows<br>
<input type="radio" name="OS" onClick="setTextField(this.form.OSType,true)">UNIX<br>
<input type="radio" name="OS" onClick="setTextField(this.form.OSType,false)">その他<br>
<input type="text" name="OSType" disabled><br>
</form>
</body>
</html>
関数を呼び出さずに処理する場合は以下のようにします。
<html>
<head>
<title></title>
</head>
<body>
<form name="osFORM">
<input type="radio" name="OS" onClick="this.form.OSType.disabled = true" checked>MacOS<br>
<input type="radio" name="OS" onClick="this.form.OSType.disabled = true">Windows<br>
<input type="radio" name="OS" onClick="this.form.OSType.disabled = true">UNIX<br>
<input type="radio" name="OS" onClick="this.form.OSType.disabled = false">その他<br>
<input type="text" name="OSType" disabled><br>
</form>
</body>
</html>
次回から「ウィンドウ」と「サブウィンドウ」について説明していきます。