Tweet

JavaScriptでフォームのテキストボックスの入力無効化・有効化

JavaScriptでフォームのテキストボックスの入力無効化、有効化を切り替える。

入力の無効化

まず、フォームのテキストボックス（input要素）の入力を無効にするには disabled を書けば良い。

<input type="text" value="test" disabled />

表示例


textarea要素でも使える。
ブラウザによっては入力エリアがグレーアウトするが、そうでないブラウザもあり、見え方は様々。

JavaScriptで切替

上記の disabled は JavaScript で無効と有効を切り替えられる。
プルダウンメニュー（select要素）で選んだ項目に応じて無効と有効を切り替えるサンプルを以下に記す。

<select id="ex_age">
<option value="under">20歳未満</option>
<option value="over">20歳以上</option>
</select>

<input id="ex_box" type="text" disabled />

<script>
document.getElementById("ex_age").addEventListener("change", function(){
	var age_elem = document.getElementById("ex_age");
	var s_value = age_elem.options[age_elem.selectedIndex].value;
	var box_elem = document.getElementById("ex_box");
	
	if(s_value == "under"){
		box_elem.disabled = true;
	}else{
		box_elem.disabled = false;
	}
}, false);
</script>

表示例
20歳未満 20歳以上

デフォルトは無効（disabled）にしておき、「20歳以上」を選択すると有効（true）、「20歳未満」を選択すると無効（false）になる。

JavaScriptで表示、非表示を切り替える

以前、上記のような入力エリアの有効・無効を切り替えるページを作ったが、いろいろな環境で閲覧してみると上述のようにグレーアウトしないブラウザもあった。
人によっては「なぜ入力できないんだ」と思う可能性もある。
JavaScriptでグレーアウトする方法も考えたが、入力する必要がないなら無効化より非表示にした方が分かりやすいだろうという結論に至り、表示・非表示を切り替えることにした。

<select id="ex_age_a">
<option value="under">20歳未満</option>
<option value="over">20歳以上</option>
</select>

<div id="ex_box_div_a" style="display:none;">
<input id="ex_box_a" type="text" />
</div>

<script>
document.getElementById("ex_age_a").addEventListener("change", function(){
	var age_elem = document.getElementById("ex_age_a");
	var s_value = age_elem.options[age_elem.selectedIndex].value;
	var box_div_elem = document.getElementById("ex_box_div_a");
	
	if(s_value == "under"){
		box_div_elem.style.display = 'none';
	}else{
		box_div_elem.style.display = 'block';
	}
}, false);
</script>

表示例
20歳未満 20歳以上

jQueryで表示、非表示を切り替える

上記のようにJavaScriptで表示、非表示を切り替えたが、いきなりテキストボックスがボコッと現れるので、テキストボックスが表示されたことに気づかない人もいるのでは？と思い、jQueryを使ってアニメーション効果で徐々に表示するようにした。
パソコンだとテキストボックスの表示に気づくだろうが、スマホはプルダウンメニューを選択するとテキストボックスに被さり気づきにくい。

<select id="ex_age_b">
<option value="under">20歳未満</option>
<option value="over">20歳以上</option>
</select>

<div id="ex_box_div_b" style="display:none;">
<input id="ex_box_b" type="text" />
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
document.getElementById("ex_age_b").addEventListener("change", function(){
	var age_elem = document.getElementById("ex_age_b");
	var s_value = age_elem.options[age_elem.selectedIndex].value;
	
	if(s_value == "under"){
		$("#ex_box_div_b").hide("normal");
	}else{
		$("#ex_box_div_b").show("normal");
	}
}, false);
</script>

表示例
20歳未満 20歳以上

ただ作るだけでなく、分かりやすさ、使いやすさなど、いろいろ考えさせられる。